说说事件委托

[LuckyWinty]

事件委托， 现实意义上讲是指将自己的事务嘱托他人代为处理。js中是 允许我们不必为某些特定的节点添加事件监听器，而是将事件监听器添加到（这些节点的）某个 parent节点上。利用事件冒泡，去找到匹配的子节点元素，然后做出相应的事件响应。是主要用来解决“事件处理程序过多”这个问题的。 经典例子：ul 里面的li的事件绑定。

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";
    }
  }

好处： 1， 简化了初始化的过程，减少了多余的事件处理函数，进而节省了内存。提高性能。 2，新添加的元素还会有之前的事件。

缺点：

• 第一，要求事件在IE中必须冒泡. 大多数的事件会冒泡，但是并不是所有的。对于其他的浏览器而言，捕获阶段也会同样适用。
• 第二，理论上委托会导致浏览器额外的加载，因为在容器内的任意一个地方事件的发生，都会运行事件处理函数，所以多数情况下事件处理函数都是在空循环（没有意义的动作），通常不是什么大不了的事儿。
• 第三 如果现在的dom 元素分为很多很多层，对于底层事件的委托，有可能在事件冒泡的过程中，中途被某个节点 终止冒泡了，这样事件就传递不到上层，则委托就会失败了。

[gdutwyg]

利用事件冒泡，去找到匹配的子节点元素

这句话感觉怪怪的

[LuckyWinty]

不怪吧

| | 周文婷 邮箱：[email protected] |

签名由 网易邮箱大师 定制

在2020年08月12日 16:21，wyg 写道：

利用事件冒泡，去找到匹配的子节点元素

这句话感觉怪怪的

— You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub, or unsubscribe.

[gdutwyg]

不怪吧 | | 周文婷 邮箱：[email protected] | 签名由 网易邮箱大师 定制 在2020年08月12日 16:21，wyg 写道： 利用事件冒泡，去找到匹配的子节点元素 这句话感觉怪怪的 — You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub, or unsubscribe.

事件冒泡，应该是子元素冒泡到父元素，由里向外； 你这里说“利用事件冒泡，去找到匹配的子节点元素”，我理解成父元素利用事件冒泡，找到匹配的子元素，所以感觉有点怪怪的

[gyt95]

我对事件委托的理解同样是把对目标元素的事件，绑定在目标元素的父元素上。当点击这些目标元素时，会通过事件冒泡，从子元素冒泡到父元素，触发在父元素上绑定了的事件。

应用场景我也想到ul里的li事件绑定，但是我想到的是事件委托用于解决“当目标元素需要动态添加到页面中时”的问题。即当前页面并不存在该目标元素。

例如一个ul列表，当前是空的。需要获取数据再以<li>item1</li>的形式appendChild的话，那么就会先通过事件委托，把事件绑定在父元素ul上，等到ul中有li数据后，点击li，冒泡，触发ul事件。

不知道我的说法是否正确。仅交流观点。