• 主页

  • 投资

  • IT

    🔥

  • 设计

  • 销售

  • 人

  • 共299篇

    前端 - Javascript

关闭

返回栏目

关闭

返回前端 - Javascript栏目

112 - 事件委托 - 事件委托原理 - 利用事件冒泡实现

作者：

贺及楼

成为作者

更新日期：2025-02-21 19:53:16

事件委托 - 事件委托原理 - 利用事件冒泡实现

一、引言

在前端开发中，事件处理是一个非常重要的部分。当页面上有大量的元素需要绑定事件时，如果为每个元素都单独绑定事件，不仅会增加代码量，还会消耗较多的内存，影响页面性能。而事件委托（Event Delegation）则是一种非常巧妙的解决方案，它利用了事件冒泡的原理，能够高效地处理多个元素的事件。

二、事件冒泡与事件捕获

在了解事件委托之前，我们需要先明白事件冒泡和事件捕获这两个概念。

2.1 事件捕获

事件捕获是事件传播的第一个阶段。当一个事件发生时，事件会从文档的根节点（document）开始，逐层向下查找目标元素，直到找到事件发生的具体元素。这个过程就像一个探测器从高处向下搜索一样。

2.2 事件冒泡

事件冒泡是事件传播的第二个阶段。在事件捕获阶段找到目标元素后，事件会从目标元素开始，逐层向上传播，直到到达文档的根节点（document）。就好像一个气泡从水底慢慢向上浮到水面一样。

2.3 示例代码

  1. <!DOCTYPE html>
  2. <html lang="en">
  4. <head>
  5.     <meta charset="UTF-8">
  6. </head>
  8. <body>
  9.     <div id="outer">
  10.         <div id="inner">点击我</div>
  11.     </div>
  12.     <script>
  13.         const outer = document.getElementById('outer');
  14.         const inner = document.getElementById('inner');
  16.         // 事件捕获
  17.         outer.addEventListener('click', () => {
  18.             console.log('外层元素捕获阶段');
  19.         }, true);
  20.         inner.addEventListener('click', () => {
  21.             console.log('内层元素捕获阶段');
  22.         }, true);
  24.         // 事件冒泡
  25.         outer.addEventListener('click', () => {
  26.             console.log('外层元素冒泡阶段');
  27.         }, false);
  28.         inner.addEventListener('click', () => {
  29.             console.log('内层元素冒泡阶段');
  30.         }, false);
  31.     </script>
  32. </body>
  34. </html>

当点击“点击我”文本时，控制台会依次输出：

  1. 外层元素捕获阶段
  2. 内层元素捕获阶段
  3. 内层元素冒泡阶段
  4. 外层元素冒泡阶段

三、事件委托原理

事件委托正是利用了事件冒泡的特性。它将事件处理程序绑定到一个父元素上，而不是绑定到每个子元素上。当子元素上的事件触发时，事件会冒泡到父元素上，父元素上的事件处理程序就会被执行。在这个过程中，我们可以通过事件对象的 target 属性来判断是哪个子元素触发了事件，从而进行相应的处理。

四、事件委托的优点

4.1 减少内存占用

如果为每个子元素都单独绑定事件处理程序，那么每个元素都会在内存中占用一定的空间。而使用事件委托，只需要在父元素上绑定一个事件处理程序，大大减少了内存的使用。

4.2 动态添加元素时无需重新绑定事件

当页面动态添加新的子元素时，如果使用传统的事件绑定方式，需要为新元素重新绑定事件处理程序。而使用事件委托，由于事件处理程序绑定在父元素上，新添加的子元素也会自动具有相应的事件处理能力。

五、事件委托的实际应用

5.1 列表项点击事件处理

  1. <!DOCTYPE html>
  2. <html lang="en">
  4. <head>
  5.     <meta charset="UTF-8">
  6. </head>
  8. <body>
  9.     <ul id="myList">
  10.         <li>列表项 1</li>
  11.         <li>列表项 2</li>
  12.         <li>列表项 3</li>
  13.     </ul>
  14.     <script>
  15.         const list = document.getElementById('myList');
  17.         list.addEventListener('click', (event) => {
  18.             if (event.target.tagName === 'LI') {
  19.                 console.log(`你点击了：${event.target.textContent}`);
  20.             }
  21.         });
  22.     </script>
  23. </body>
  25. </html>

在这个例子中，我们将点击事件处理程序绑定到了 ul 元素上。当点击任何一个 li 元素时，事件会冒泡到 ul 元素上，然后通过判断 event.target 的 tagName 是否为 LI，来确定是哪个列表项被点击了。

5.2 动态添加元素的情况

  1. <!DOCTYPE html>
  2. <html lang="en">
  4. <head>
  5.     <meta charset="UTF-8">
  6. </head>
  8. <body>
  9.     <ul id="dynamicList">
  10.         <li>初始列表项 1</li>
  11.         <li>初始列表项 2</li>
  12.     </ul>
  13.     <button id="addItem">添加列表项</button>
  14.     <script>
  15.         const dynamicList = document.getElementById('dynamicList');
  16.         const addItemButton = document.getElementById('addItem');
  18.         dynamicList.addEventListener('click', (event) => {
  19.             if (event.target.tagName === 'LI') {
  20.                 console.log(`你点击了：${event.target.textContent}`);
  21.             }
  22.         });
  24.         addItemButton.addEventListener('click', () => {
  25.             const newItem = document.createElement('li');
  26.             newItem.textContent = '新列表项';
  27.             dynamicList.appendChild(newItem);
  28.         });
  29.     </script>
  30. </body>
  32. </html>

在这个例子中，我们为 ul 元素绑定了点击事件处理程序。当点击“添加列表项”按钮时，会动态添加一个新的 li 元素到列表中。由于事件处理程序绑定在 ul 元素上，新添加的 li 元素也会自动具有点击事件处理能力。

六、总结

概念 描述
事件捕获 事件从文档根节点开始，逐层向下查找目标元素
事件冒泡 事件从目标元素开始，逐层向上传播到文档根节点
事件委托 利用事件冒泡特性，将事件处理程序绑定到父元素上，通过 event.target 判断触发事件的子元素
优点 减少内存占用，动态添加元素时无需重新绑定事件

事件委托是前端开发中一个非常实用的技巧，它能够帮助我们更高效地处理事件，提高页面性能。通过合理运用事件委托，我们可以让代码更加简洁、易于维护。希望本文能帮助你更好地理解和使用事件委托。