js 事件代理详解

最新推荐文章于 2025-03-29 18:52:53 发布

原创最新推荐文章于 2025-03-29 18:52:53 发布 · 4.9k 阅读

13 ·

CC 4.0 BY-SA版权

文章标签：

#前端 #javascript #面试

js 专栏收录该内容

4 篇文章

订阅专栏

本文详细介绍了JavaScript中的事件代理机制，包括事件冒泡和捕获的概念。通过实例展示了如何利用事件委托减少事件绑定，提高性能，并处理动态元素。事件委托的核心在于将事件绑定到父元素，通过`e.target`捕获触发事件的子元素，从而实现对大量子元素的操作，如删除列表项。这种方法在处理大规模或动态变化的DOM结构时尤其有效。

事件代理就是基于js的事件流产生的，事件流有2中类型，即冒泡和捕获。

冒泡：当子元素触发某个事件的时候后，该事件会依次向上触发父元素的同类事件

捕获：和冒泡类似，只不过事件的顺序相反，即是从上级节点传递到下级节点

事件委托利用事件冒泡，将事件加载父元素或者祖元素上，触发该事件。e.target

<body>
    <div id="big">
        <div id="center">
            <div id="small"></div>
        </div>
    </div>
</body>
<script>
    var big = document.querySelector('#big')
    var center = document.querySelector('#center')
    var small = document.querySelector('#small')
    big.onclick = function (e) {
        console.log('big');
        console.log(e.target);

    }
    center.onclick = function () {
        console.log('center');

    }
    small.onclick = function () {
        console.log('small');

    }
</script>

当我们依次点击了small，center, big，控制台会依次打印

小结：当我们触发了子元素的事件时，基于js的事件流，事件就会依次往父级身上传.

<body>
    <div id="big">
        <div id="center">
            <div id="small"></div>
        </div>
    </div>
</body>
<script>
    var big = document.querySelector('#big')
    var center = document.querySelector('#center')
    var small = document.querySelector('#small')
    big.onclick = function (e) {
        console.log('big');
        console.log(e.target);

    }
    // center.onclick = function () {
    //     console.log('center');

    // }
    // small.onclick = function () {
    //     console.log('small');

    // }
</script>

现在我们把center 和 small 的事件注释掉，然后再来看看e.target的结果

小结：可以看出 e.target是捕获阶段最小的元素。e.target 可以找到任意一个子元素。

例2（核心）：

<body>
    <ul>
        <li>香蕉</li>
        <li>苹果</li>
        <li>荔枝</li>
    </ul>
</body>
<script>
  var li = document.querySelectorAll('li')
  var ul = document.querySelector('ul')
  for(var i = 0;i<li.length;i++ ){
      li[i].onclick=function(){
          ul.removeChild(this)
      }
  }
</script>

现在我们点击上图了每一个 li 就会删除掉点击的那个 li, 这是因为循环给每一个li 都绑定了点击事件，如果有10000个li 那么就太耗费性能了，也就是说循环 li.length次。这个时候我们就应该想到利用事件委托来实现。

<body>
    <ul>
        <li>香蕉</li>
        <li>苹果</li>
        <li>荔枝</li>
    </ul>
</body>
<script>
//   var li = document.querySelectorAll('li')
  var ul = document.querySelector('ul')
  ul.onclick = function(e){
      ul.removeChild(e.target)
  }
</script>

首先我们把子元素的点击事件放到父元素 ul 身上，然后通过事件捕获--e.target 来获取到我们当前的子元素--li,在通过事件冒泡来触发父元素的点击事件。也不用循环 li.length次从而节约了大量的性能消耗。

事件委托的好处：

减少绑定事件数量，如果事件绑定数量过多，页面执行性能较差，所以事件委托能够提高性能

事件委托可以灵活的处理子节点动态变化的场景，无论子节点增加还是减少，事件都无需重新绑定