什么是事件委托

事件委托是利用事件流的特征解决一些开发需求的知识技巧

  • 优点：
    • 给父级元素加事件（可以提高性能）
    • 可以为后添加到页面的元素注册事件
  • 原理： 事件委托其实是利用事件冒泡的特点， 给父元素添加事件，子元素可以触发
  • 实现： 事件对象.target 可以获得真正触发事件的元素 ```javascript // 比如，希望给每个 li 都注册一个单击事件 // 之前的做法是，找到所有的li，循环，分别注册单击事件

// 使用事件委托的方案 let ul = document.querySelector(‘ul’)

// 把事件委托给 ul （父元素） ul.addEventListener(‘click’, function (e) { // 根据事件冒泡的原理，点击每个 li ，都会触发这个事件 // e.target 表示你点击的那个 li （真正触发事件的元素） console.log(e.target) })

  1. 事件委托是委托给了谁？
  3. - 父元素
  5. 如何找到真正触发的元素？
  7. - e.target
  8. ```javascript
  9. <body>
  10.   <ul>
  11.     <li>李白</li>
  12.     <li>关羽</li>
  13.     <li>鲁班</li>
  14.     <li>项羽</li>
  15.   </ul>
  17.   <script>
  18.     // 点击 li，能够输出当前li里面的内容
  20.     // 找到 父级 ul，添加一次单击事件即可
  21.     let ul = document.querySelector('ul')
  22.     ul.addEventListener('click', function (e) {
  23.       // alert('点击的是哪个li')
  24.       // console.log(e)
  25.       // e.target 表示我们点击的那个子元素
  26.       // e.target ======= document.querySelector('li')
  27.       alert(e.target.innerHTML)
  28.       // console.log(e.target.tagName) // LI   得到点击的那个标签的标签名
  29.       // console.log(e.target.nodeName) // LI 得到点击的那个标签的节点名
  30.       // e.target.classList.add('abc')
  31.     })
  32.   </script>
  33. </body>

适用的情形

  • 容器中很多后代元素的某个行为要进行的操作，委托给容器处理是不错的选择
  • 元素是动态绑定的，只需要给父元素绑定事件，不管元素什么时候出现，都会冒泡给父元素，就不需要再帮绑定之后再分别获取进行事件绑定
  • 需求是除了某某某，剩下的操作都是干同样的事情（此时把点击行为的操作委托给 body，事件源是某某做什么，不是同一做什么）

    案例：利用事件委派实现排他思想

tab.gif

  1. <ul id="list">
  2.   <li class="item current">语文</li>
  3.   <li class="item">数学</li>
  4.   <li class="item">英语</li>
  5.   <li class="item">生物</li>
  6. </ul>
  1. *{
  2.   margin: 0;
  3.   padding: 0;
  4. }
  6. ul{
  7.   width: 300px;
  8.   list-style: none;
  9.   font-size: 0;
  10.   margin: 20px auto 0 auto;
  11. }
  13. .item{
  14.   width: 25%;
  15.   display: inline-block;
  16.   padding: 5px 0;
  17.   text-align: center;
  18.   cursor: pointer;
  19.   font-size: 14px;
  20. }
  22. .current{
  23.   background: #ff4071;
  24.   color: #fff;
  25. }
  1. var list = document.querySelector('#list');
  2. var item = list.querySelectorAll('li');
  3. list.addEventListener('click',function(e){
  4.     for(var i=0; i<item.length; i++){
  5.         item[i].className = 'item';
  6.     }
  7.     e.target.className = 'item current';
  8. })