javascript中什么是事件代理，它有什么用，有哪些使用场景

Sherry Tian

已于 2024-12-11 08:46:08 修改

阅读量1k

点赞数 24

分类专栏： javascript 文章标签： javascript 开发语言 ecmascript

于 2024-09-27 21:43:44 首次发布

本文链接：https://blog.youkuaiyun.com/misstianyun/article/details/142602893

版权

javascript 专栏收录该内容

69 篇文章

订阅专栏

😉你好呀，我是爱编程的Sherry，很高兴在这里遇见你！我是一名拥有十多年开发经验的前端工程师。这一路走来，面对困难时也曾感到迷茫，凭借不懈的努力和坚持，重新找到了前进的方向。我的人生格言是——认准方向，坚持不懈，你终将迎来辉煌！欢迎关注我😁，我将在这里分享工作中积累的经验和心得，希望我的分享能够给你带来帮助。

引言

在日常开发中，你有没有遇到过动态生成的元素，绑定的事件失效这种情况，比如你动态生成了一个li元素，计划是点击这个li元素执行一个alert事件，但是结果却没有按照你的计划执行。这是为什么呢？如何处理呢？

这是因为当你设置事件绑定时，只有那些已经存在于DOM中的元素会被正确地绑定上相应的事件处理程序，而之后动态创建并插入到DOM中的元素，由于它们在最初的事件绑定过程中不存在，所以不会自动绑定这些事件处理程序。

我们可以利用javascript的事件代理机制来解决这个问题，下面我们先来了解一下什么是javascript的事件代理以及它的应用场景和实现方法。

事件代理（Event Delegation）

事件代理是指利用 JavaScript 的事件冒泡机制，将子元素的事件委托到父元素来处理，而不是为每个子元素单独绑定事件监听器。通过给父元素绑定一个事件监听器，当子元素触发事件时，事件冒泡到父元素，由父元素处理这个事件。这可以减少事件监听器的数量，提升性能，尤其是在处理大量动态生成的子元素时非常有用。

事件代理的工作原理

事件冒泡：

当某个子元素触发事件（如点击、键盘事件等）时，事件会从目标元素逐层向上传递到它的父元素，直至根元素（通常是 document）。这一过程叫做事件冒泡。

父元素处理子元素的事件：

利用事件冒泡机制，可以在父元素上监听事件，通过事件对象 event.target 获取具体触发事件的子元素，然后根据需要进行处理。

应用场景

事件代理特别适用于以下场景：

处理动态生成的元素：

如果页面中有大量动态生成的元素（如列表项、表单项等），可以通过事件代理只在父级容器上绑定一次事件，而不是为每个新生成的元素单独绑定事件。

减少事件监听器数量：

当页面中有大量相同类型的子元素（如多个按钮、列表项等），可以通过事件代理减少内存占用和事件绑定的开销。相较于给每个子元素绑定事件监听器，在父级容器上绑定一个事件监听器更加高效。

事件代理的优点

提高性能：

当页面中有大量元素时，如果每个元素都绑定一个事件监听器，内存开销和性能损耗会很大。通过事件代理，父元素可以代替子元素统一处理事件，从而减少绑定的事件监听器数量，提升性能。

便于管理动态元素：

当子元素是动态生成或删除的，事件代理使得我们不必每次手动为新增的子元素绑定或移除事件监听器。因为子元素的事件由父元素处理，动态增加的子元素也会自动被代理。

事件代理的实现方式

示例 1：简化按钮点击事件处理

<div id="button-container">
  <button>Button 1</button>
  <button>Button 2</button>
  <button>Button 3</button>
</div>

<script>
  document.getElementById('button-container').addEventListener('click', function(event) {
    if (event.target.tagName === 'BUTTON') { // 确保点击的是按钮
      console.log(event.target.innerText + ' clicked');
    }
  });
</script>

在这个例子中，虽然容器 #button-container 中有多个按钮，但我们只为父元素绑定了一个事件监听器。无论点击哪个按钮，事件都会冒泡到父元素，然后通过 event.target 判断具体点击的是哪个按钮。

示例 2：动态生成的元素处理

<ul id="list">
  <li>Item 1</li>
  <li>Item 2</li>
</ul>
<button id="add-item">Add Item</button>

<script>
  // 使用事件代理监听列表项的点击事件
  document.getElementById('list').addEventListener('click', function(event) {
    if (event.target.tagName === 'LI') {
      console.log(event.target.innerText + ' clicked');
    }
  });

  // 动态添加新列表项
  document.getElementById('add-item').addEventListener('click', function() {
    var newItem = document.createElement('li');
    newItem.textContent = 'New Item';
    document.getElementById('list').appendChild(newItem);
  });
</script>