关于javascript事件委托的信息

javascript什么时候使用事件委托

通俗的讲，事件就是onclick，onmouseover，onmouseout，等就是事件，委托呢，就是让别人来做，这个事件本来是加在某些元素上的，然而你却加到别人身上来做，完成这个事件。

也就是：利用冒泡的原理，把事件加到父级上，触发执行效果。

好处呢：1，提高性能。

我们可以看一个例子：需要触发每个li来改变他们的背景颜色。

ul id="ul"

liaaaaaaaa/li

libbbbbbbb/li

licccccccc/li

/ul

window.onload = function(){

var oUl = document.getElementById("ul");

var aLi = oUl.getElementsByTagName("li");

for(var i=0; iaLi.length; i++){

aLi[i].onmouseover = function(){

this.style.background = "red";

}

aLi[i].onmouseout = function(){

this.style.background = "";

}

}

}

这样我们就可以做到li上面添加鼠标事件。

但是如果说我们可能有很多个li用for循环的话就比较影响性能。

下面我们可以用事件委托的方式来实现这样的效果。html不变

window.onload = function(){

var oUl = document.getElementById("ul");

var aLi = oUl.getElementsByTagName("li");

/*

这里要用到事件源：event 对象，事件源，不管在哪个事件中，只要你操作的那个元素就是事件源。

ie：window.event.srcElement

标准下:event.target

nodeName:找到元素的标签名

*/

oUl.onmouseover = function(ev){

var ev = ev || window.event;

var target = ev.target || ev.srcElement;

//alert(target.innerHTML);

if(target.nodeName.toLowerCase() == "li"){

target.style.background = "red";

}

}

oUl.onmouseout = function(ev){

var ev = ev || window.event;

var target = ev.target || ev.srcElement;

//alert(target.innerHTML);

if(target.nodeName.toLowerCase() == "li"){

target.style.background = "";

}

}

}

好处2，新添加的元素还会有之前的事件。

我们还拿这个例子看，但是我们要做动态的添加li。点击button动态添加li

如：

input type="button" id="btn" /

ul id="ul"

liaaaaaaaa/li

libbbbbbbb/li

licccccccc/li

/ul

不用事件委托我们会这样做：

window.onload = function(){

var oUl = document.getElementById("ul");

var aLi = oUl.getElementsByTagName("li");

var oBtn = document.getElementById("btn");

var iNow = 4;

for(var i=0; iaLi.length; i++){

aLi[i].onmouseover = function(){

this.style.background = "red";

}

aLi[i].onmouseout = function(){

this.style.background = "";

}

}

oBtn.onclick = function(){

iNow ++;

var oLi = document.createElement("li");

oLi.innerHTML = 1111 *iNow;

oUl.appendChild(oLi);

}

}

这样做我们可以看到点击按钮新加的li上面没有鼠标移入事件来改变他们的背景颜色。

因为点击添加的时候for循环已经执行完毕。

那么我们用事件委托的方式来做。就是html不变

window.onload = function(){

var oUl = document.getElementById("ul");

var aLi = oUl.getElementsByTagName("li");

var oBtn = document.getElementById("btn");

var iNow = 4;

oUl.onmouseover = function(ev){

var ev = ev || window.event;

var target = ev.target || ev.srcElement;

//alert(target.innerHTML);

if(target.nodeName.toLowerCase() == "li"){

target.style.background = "red";

}

}

oUl.onmouseout = function(ev){

var ev = ev || window.event;

var target = ev.target || ev.srcElement;

//alert(target.innerHTML);

if(target.nodeName.toLowerCase() == "li"){

target.style.background = "";

}

}

oBtn.onclick = function(){

iNow ++;

var oLi = document.createElement("li");

oLi.innerHTML = 1111 *iNow;

oUl.appendChild(oLi);

}

}

[img]

相关问答

Q1: js失焦可以用事件委托吗

可以。基于JS的事件冒泡机制从内到外，可以以JS事件委托的方式，在父元素上给子元素绑定事件，从而减少代码的复杂度。js失焦是指在JavaScript中，失去焦点事件是blur()事件。

Q2: 如何理解JavaScript里的事件委托

什么叫事件委托？他还有一个名字叫做事件代理，（时间代理 === 事件委托，现在才知道这两个是一个意思）

高程3上讲：事件委托即是利用事件冒泡，只指定一个事件处理程序，就可以管理某一类型的所有事件。

借鉴其他大牛的一个例子，也为自己更好的理解一下：收快递例子

有三个同事预计会在周一收到快递。为签收快递，有两种办法：一是三个人在公司门口等快递；二是委托给前台MM代为签收。现实当中，我们大都采用委托的方案（公司也不会容忍那么多员工站在门口就为了等快递）。前台MM收到快递后，她会判断收件人是谁，然后按照收件人的要求签收，甚至代为付款。这种方案还有一个优势，那就是即使公司里来了新员工（不管多少），前台MM也会在收到寄给新员工的快递后核实并代为签收。

两层意思：

1.现在委托前台的同事是可以签收的，即程序中的现有的dom节点是有事件的；

2.新员工也是可以被前台mm代为签收的，即程序中新添加的dom节点也是有事件的；

Q3: 事件代理和事件委托

事件委托就是利用事件冒泡，只指定一个事件处理程序，就可以管理某一类型的所有事件,事件委托又叫事件代理。

举一个通俗的例子：有三个同事预计会在周一收到快递。为签收快递，有两种办法：一是三个人在公司门口等快递；二是委托给前台代为签收。现实当中，我们大都采用委托的方案

前台收到快递后，会判断收件人是谁，然后按照收件人的要求签收，甚至代为付款。这种方案还有一个优势，那就是即使公司里来了新员工，前台也会在收到寄给新员工的快递后核实并代为签收。

这里其实还有2层意思的：

一般来说，dom需要有事件处理程序，我们都会直接给它设事件处理程序就好了，那如果是很多的dom需要添加事件处理呢？比如我们有100个li，每个li都有相同的click点击事件，可能我们会用for循环的方法，来遍历所有的li，然后给它们添加事件，那这么做会存在什么影响呢？

在JavaScript中，添加到页面上的事件处理程序数量将直接关系到页面的整体运行性能，因为需要不断的与dom节点进行交互，访问dom的次数越多，引起浏览器重绘与重排的次数也就越多，就会延长整个页面的交互就绪时间，这就是为什么性能优化的主要思想之一就是减少DOM操作的原因；如果要用事件委托，就会将所有的操作放到js程序里面，与dom的操作就只需要交互一次，这样就能大大的减少与dom的交互次数，提高性能；

每个函数都是一个对象，是对象就会占用内存，对象越多，内存占用率就越大，自然性能就越差了，比如上面的100个li，就要占用100个内存空间，如果是1000个，10000个呢，如果用事件委托，那么我们就可以只对它的父级（如果只有一个父级）这一个对象进行操作，这样我们就需要一个内存空间就够了，性能就会更好。

事件委托是利用事件的冒泡原理来实现的，何为事件冒泡呢？就是事件从最深的节点开始，然后逐步向上传播事件，举个例子：页面上有这么一个节点树，divullia;比如给最里面的a加一个click点击事件，那么这个事件就会一层一层的往外执行，执行顺序aliuldiv，有这样一个机制，那么我们给最外面的div加点击事件，那么里面的ul，li，a做点击事件的时候，都会冒泡到最外层的div上，所以都会触发，这就是事件委托，委托它们父级代为执行事件。

介绍了浏览器的事件冒泡机制，这里再详细介绍一下浏览器处理DOM事件的过程。对于事件的捕获和处理，不同的浏览器厂商有不同的处理机制，这里我们主要介绍W3C对DOM2.0定义的标准事件。DOM2.0模型将事件处理流程分为三个阶段：一、事件捕获阶段，二、事件目标阶段，三、事件起泡阶段。如图：

事件捕获：当某个元素触发某个事件（如onclick），顶层对象document就会发出一个事件流，随着DOM树的节点向目标元素节点流去，直到到达事件真正发生的目标元素。在这个过程中，事件相应的监听函数是不会被触发的。

事件目标：当到达目标元素之后，执行目标元素该事件相应的处理函数。如果没有绑定监听函数，那就不执行。

事件起泡：从目标元素开始，往顶层元素传播。途中如果有节点绑定了相应的事件处理函数，这些函数都会被一次触发。如果想阻止事件起泡，可以使用e.stopPropagation()（Firefox）或者e.cancelBubble=true（IE）来阻止事件的冒泡传播。

1、在介绍事件委托的方法之前，我们先来看一段一般方法的例子：子节点实现相同的功能，实现功能是点击li，弹出123：

我们看到有多少次的dom操作，首先要找到ul，然后遍历li，然后点击li的时候，又要找一次目标的li的位置，才能执行最后的操作，每次点击都要找一次li；那么我们用事件委托的方式做又会怎么样呢？

这里用父级ul做事件处理，当li被点击时，由于冒泡原理，事件就会冒泡到ul上，因为ul上有点击事件，所以事件就会触发，当然，这里当点击ul的时候，也是会触发的，那么问题就来了，如果我想让事件代理的效果跟直接给节点的事件效果一样怎么办，比如说只有点击li才会触发：

Event对象提供了一个属性叫target，可以返回事件的目标节点，我们称为事件源，也就是说，target就可以表示为当前的事件操作的dom，但是不是真正操作dom，当然，这个是有兼容性的，标准浏览器用ev.target，IE浏览器用event.srcElement，此时只是获取了当前节点的位置，并不知道是什么节点名称，这里我们用nodeName来获取具体是什么标签名，这个返回的是一个大写的，我们需要转成小写再做比较

这样改下就只有点击li会触发事件了，且每次只执行一次dom操作，如果li数量很多的话，将大大减少dom的操作，优化的性能可想而知！

2、上面的例子是说li操作的是同样的效果，要是每个li被点击的效果都不一样，那么用事件委托还有用吗？

用事件代理如何优化？？

现在是移入li，li变红，移出li，li变白，这么一个效果，然后点击按钮，可以向ul中添加一个li子节点

这是一般的做法，但是你会发现，新增的li是没有事件的，说明添加子节点的时候，事件没有一起添加进去，这不是我们想要的结果，那怎么做呢？一般的解决方案会是这样，将for循环用一个函数包起来，命名为mHover，如下：

虽然功能实现了，看着还挺好，但实际上无疑是又增加了一个dom操作，在优化性能方面是不可取的，那么有事件委托的方式，能做到优化吗？

看上面是用事件委托的方式，新添加的子元素是带有事件效果的，我们可以发现，当用事件委托的时候，根本就不需要去遍历元素的子节点，只需要给父级元素添加事件就好了，其他的都是在js里面的执行，这样可以大大的减少dom操作，这才是事件委托的精髓所在。

那什么样的事件可以用事件委托，什么样的事件不可以用呢？

适合用事件委托的事件：

不适合的就有很多了，举个例子，mousemove，每次都要计算它的位置，非常不好把控，再比如说focus，blur，load，unload之类的，本身就没用冒泡的特性，自然就不能用事件委托了。

Q4: 在javascript中什么是事件委托 原理是什么

比方说a元素里面包含了b元素（或者说a元素是b元素的父元素），当b元素触发事件时，会同时把事件冒泡给a元素，也就是说a元素也会触发事件。利用这个原理，b元素就可以不对事件做任何处理，而是委托给a元素去处理，这样，当a元素中动态添加了多个与b元素同级的元素（也就是a新添加了几个儿子）或者是b元素的子元素（也就是a的孙子），这些新添加的元素都不用再绑定事件处理函数了，通通由a元素去处理即可（a元素通过target对象就可以知道事件委托方是哪个元素，从而进行不同的处理），这样就简化了程序，也避免了相互之间发生冲突的可能性。这就是事件委托。