定义

  • 通俗地讲，事件委托就是把一个元素的事件响应处理程序委托给另一个元素。

举个例子 🌰

HTML代码

  1. <ul id="myLink">
  2.     <li id="1">aaa</li>
  3.     <li id="2">bbb</li>
  4.     <li id="3">ccc</li>
  5. </ul>
  • 这里有一个无序列表，我们想给其中的每个<li>标签都加上一个点击事件。

  • 在不知道事件委托的情况下，最笨的方法就是用一个循环给每个<li>标签都加上一个点击事件处理程序。

    不使用事件委托

    1. // 不使用事件委托
    2. // 先找到所有<li>标签
    3. let myLink = document.getElementById('myLink');
    4. let li = myLink.getElementsByTagName('li');
    5. // 使用for循环给每个<li>标签都加上一个点击事件处理程序
    6. for(let i = 0; i < li.length; i++) {
    7.   li[i].onclick = (e) => {
    8.       let e = event || window.event;
    9.       let target = e.target || e.srcElement;
    10.       alert(e.target.id + ':' + e.target.innerText);  
    11.   };
    12. }

  • 这样做存在很多问题：

    • 非常消耗内存；
    • 当有动态添加的元素时，需要重新给元素绑定事件；

      使用事件委托

  • 当我们可以通过使用事件委托将事件委托给它的父级元素。

    1. let myLink = document.getElementById('myLink');
    2. // 给父级元素添加一个点击事件处理程序
    3. myLink.onclick = (e) => {
    4.   var e = event || window.event;
    5.   var target = e.target || e.srcElement;
    6.   // 使用target和nodeName来找到<li>标签，并设定点击事件仅对<li>生效
    7.   if(e.target.nodeName.toLowerCase() == 'li') {
    8.       alert(e.target.id + ':' + e.target.innerText);
    9.   }
    10. };

优点

  • 不需要给每一个元素都分配一个处理程序，减少内存空间占用；
  • HTML结构非常灵活，方便动态元素的处理；

缺点

  • 层级太多的话，事件冒泡可能会被某一层阻止。