什么是事件代理？首先得知道什么是事件，并且弄清楚事件流，才能真正明白事件代理原理。一、什么是事件？ javascript与HTML之间交互就是通过事件实现的，事件就是文档或浏览器窗口中发生的一些特定的交互瞬间。如onload、onclick、onmouseup、onmousedown... 。二、事件流 DOM(文档对象模型)结构是一个树型结构，当一个HTML元素产生一个事件时，该事件会在元素结点与根结点之间的路径传播，路径所经过的结点都会收到该事件，...
事件委托又称事件代理，JS高程上讲：事件委托就是利用事件冒泡，只制定一个时间处理程序，就可以管理某一类型的所有事件。举例：等待签收快递的时候，一是可以在门口等快递送达；二是委托给公司前台代为签收。现实当中，我们大都采用委托的方案。前台收到快递后，她会判断收件人是谁，然后按照收件人的要求签收，甚至代为付款。这种方案还有一个优势，那就是即使公司里来了新员工（不管多少），前台也会在收到寄给新员工的快递后核...
之前有接触过事件代理，但是印象并不深刻。这次记下来加强印象。 用个大家比较常见的代码举例子： html dom结构：<ul id="ul1"><li>001</li><li>002</li><li>003</li> </ul><script> var oUl = document.getElementById(‘ul1‘); var aLi = oUl.getElementsByTagName(‘li‘); for (var i = 0, i = aLi.length; i++) {aLi.onclick = fn; } </script> 需求：如果需要给每个li添加点击事件。 常规实现方法：遍历每个li...
在javasript中delegate这个词经常出现，看字面的意思，代理、委托。那么它究竟在什么样的情况下使用？它的原理又是什么？在各种框架中，也经常能看到delegate相关的接口。这些接口又有什么特殊的用法呢？这篇文章就主要介绍一下javascript delegate的用法和原理，以及Dojo，jQuery等框架中delegate的接口。JavaScript事件代理首先介绍一下JavaScript的事件代理。事件代理在JS世界中一个非常有用也很有趣的功能。当我们需要对很多元...
1、什么是事件委托/事件代理 利用事件的冒泡传播机制（触发当前元素的某一个行为，它父级所有元素的相关行为都会被触发），如果一个容器中有很多元素都要绑定点击事件，我们没有必要一个个的绑定了，只需要给最外层容器绑定一个点击事件即可，在这个方法执行的时候，通过事件源的区分来进行不同的操作。 具体小案例如下： <!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Document</title><style>*...
这次给大家带来如何使用JS事件代理，如何使用JS事件代理的注意事项有哪些，下面就是实战案例，一起来看一下。事件委托（也叫事件代理），其实这个问题也简单，要想弄明白事件委托，我们先要把事件冒泡的机制搞清楚。举个事件冒泡的例子：<ul><li>点击</li> </ul> <script>var ul=document.getElementsByTagName(ul)[0];var li=document.getElementsByTagName(li)[0];ul.addEventListener(click, function(){alert(我是ul,我被点击了...
JavaScript事件代理事件代理在JS世界中一个非常有用也很有趣的功能。当我们需要对很多元素添加事件的时候，可以通过将事件添加到它们的父节点而将事件委托给父节点来触发处理函数。这主要得益于浏览器的事件冒泡机制,下面我们具体举个例子来解释如何使用这个特性。这个例子主要取自David Walsh的相关文章（How JavaScript Event Delegation Works）。假设有一个 UL 的父节点，包含了很多个 Li 的子节点：<ul id="list"><li id="li-...
很久很久以来，总感觉事件发生与事件代理到之间没什么鸟区别。 最近，又看了一下，感觉区别其实真不大！看怎么理解吧。 要搞清楚什么是事件代理，就需要先搞清楚什么是代理。 从商业角度来讲，代理就是：我有货，你没货，但丫我没时间、没精力全部卖掉，而你一天闲的蛋疼，只剩下时间了。于是，我委托你帮我买，然后哥给你提成。这个过程中，你实际上相当于也有了货。 OK，怎么从字面来理解事件代理一词的含义？后文有讲。 一 先看...
在javasript中，代理、委托经常出现。 那么它究竟在什么样的情况下使用？它的原理又是什么？ 这里介绍一下javascript delegate的用法和原理，以及Dojo，jQuery等框架中delegate的接口。 JavaScript事件代理 事件代理在JS世界中一个非常有用也很有趣的功能。当我们需要对很多元素添加事件的时候，可以通过将事件添加到它们的父节点而将事件委托给父节点来触发处理函数。 这主要得益于浏览器的事件冒泡机制,下面我们具体举个例子来解...
简言之，闭包是产生一个没有被释放资源的栈区。换言之，就是一个不可控的内存空间占用，如果与事件相关联，JS的垃圾回收机制也不会去触碰该区域。 例如：我们有个项目需要实现在一个div中有上百个热点区域（a标签），类似淘宝店铺广告位自定义，那么按照传统的做法，我们会如下做一个最典型的闭包使用的实例，目的是改变this的作用域，在其处理函数内部调用其他属于该作用域的方法或属性。 代码如下: var apply = function() { ...
事件在javascript中一直是最强大的对象之一。javascript提供了addEventListener和attachEvent两个方法来为DOM节点绑定事件，jquery作了进一步封装，提供了兼容各个浏览器的bind方法。现在来看，这种传统的事件绑定方式存在着以下不足： 1.可能需要绑定很多的EventHander。 假如页面中某个表有100行，现在必须为每一行绑定一个click事件。那么就必须绑定100个EventHandler，这对页面性能来说有着极大的负担，因为需要创建更多的内存...
在JavaScript中，经常会碰到要监听列表中多项li的情形，假设我们有一个列表如下：代码如下: item1item2item3item4如果我们要实现以下功能：当鼠标点击某一li时，alert输出该li的内容，我们通常的写法是这样的： 当列表项比较少时，直接给每个li添加onclick事件 列表项比较多时，在onload时就给每个列表项调用监听 第一种方法比较简单直接，但是没有顾及到html与JavaScript的分离，不建议使用，第二种方法的代码如下：代码如下: win...
本文实例讲述了JavaScript通过事件代理高亮显示表格行的方法。分享给大家供大家参考。具体实现方法如下：Highlight Rows table {background-color: lightgreen;}#third {background-color: yellow;}Just one.. no anotherSecond.. no anotherA third.. no anotherFourth for luck.. no anothervar addEvent = function (elem, eventType, func) {if ( elem.addEventListener )addEvent = function (elem, eventType, func) {elem.a...
本文的主要内容是根据前不久面试某家公司Web前端开发岗位，面试时做的一道数组去重问题的解题思路进行整理的，分享给大家。题目本身很简单：一个ul中有一千个li，如何给这一千个li绑定一个鼠标点击事件，当鼠标点击时alert出这个li的内容和li的位置坐标xy，123...1000需要考虑到浏览器兼容性、事件冒泡、效率等问题。看到问题后我就直接在纸上写下了如下答案：var ulItem = document.getElementById("ulItem"); var lis = document...
什么是事件委托/事件代理利用事件的冒泡传播机制（触发当前元素的某一个行为，它父级所有元素的相关行为都会被触发），如果一个容器中有很多元素都要绑定点击事件，我们没有必要一个个的绑定了，只需要给最外层容器绑定一个点击事件即可，在这个方法执行的时候，通过事件源的区分来进行不同的操作。具体小案例如下： <!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Document</title><style>*{margin:0;...