发布于 由admin

JS `Event Delegation` (事件委托)：利用事件冒泡提升性能与代码简洁性

各位观众，各位朋友，前端的英雄们，大家好！欢迎来到今天的“JS 事件委托：偷懒的艺术”讲座。我是你们的老朋友，一只秃头但热爱写代码的程序猿。今天，咱们不聊那些高大上的框架，就来聊聊一个看似简单，实则威力无穷的技巧——事件委托。

一、啥是事件委托？（别告诉我你不知道！）

想象一下，你家办喜事，来了几百号亲戚朋友。如果你要一个个敬酒、一个个发红包，那不得累死？但如果你找个司仪，让大家集中注意力，统一敬酒、统一发红包，是不是就轻松多了？

事件委托，就是前端界的司仪！

简单来说，事件委托就是：把原本绑定在子元素上的事件，委托给它们的父元素（或更高层级的祖先元素）来处理。

听起来有点玄乎？没关系，咱们来个生动的例子：

<ul id="myList">
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
</ul>

假设我们需要给每个 <li> 元素都绑定一个点击事件，弹出一个提示框，显示被点击的 <li> 的内容。

传统做法（笨办法）：

const listItems = document.querySelectorAll('#myList li');

listItems.forEach(item => {
  item.addEventListener('click', function() {
    alert('你点击了：' + this.textContent);
  });
});

这段代码没毛病，能实现功能。但是！问题来了：

  1. 性能问题： 如果 <li> 元素很多，比如几百个，那就需要绑定几百个事件监听器。这会消耗大量的内存，影响页面性能。
  2. 动态添加问题： 如果我们用 JavaScript 动态地向 <ul> 中添加新的 <li> 元素，那么新添加的 <li> 元素不会自动绑定点击事件。我们需要重新运行上面的代码。

事件委托（聪明办法）：

const myList = document.getElementById('myList');

myList.addEventListener('click', function(event) {
  // 检查点击的是否是 <li> 元素
  if (event.target.tagName === 'LI') {
    alert('你点击了：' + event.target.textContent);
  }
});

这段代码只需要绑定一个事件监听器到 <ul> 元素上。当点击 <li> 元素时，事件会沿着 DOM 树向上冒泡，最终冒泡到 <ul> 元素上。<ul> 元素的事件监听器会检查事件的目标(event.target)是否是 <li> 元素，如果是，就执行相应的操作。

二、事件冒泡：事件委托的基石

要理解事件委托，就必须理解事件冒泡。

什么是事件冒泡？

当一个元素上的事件被触发后，该事件会从触发元素开始，沿着 DOM 树向上冒泡，依次触发父元素、祖先元素上的相同事件。

举个例子：

<div id="grandparent">
  <div id="parent">
    <button id="child">Click Me</button>
  </div>
</div>

<script>
  const grandparent = document.getElementById('grandparent');
  const parent = document.getElementById('parent');
  const child = document.getElementById('child');

  child.addEventListener('click', function() {
    console.log('Child clicked');
  });

  parent.addEventListener('click', function() {
    console.log('Parent clicked');
  });

  grandparent.addEventListener('click', function() {
    console.log('Grandparent clicked');
  });
</script>

当我们点击 Click Me 按钮时，控制台会依次输出：

Child clicked
Parent clicked
Grandparent clicked

这就是事件冒泡。事件从 child 元素开始，向上冒泡到 parent 元素，再到 grandparent 元素。

事件委托正是利用了事件冒泡的特性。 当点击子元素时，事件会冒泡到父元素，父元素通过判断 event.target 来确定是哪个子元素触发了事件，从而执行相应的操作。

三、事件委托的优势：性能优化与代码简洁

事件委托的优势主要体现在以下两个方面：

  1. 性能优化：

    • 减少事件监听器的数量：只需要绑定一个事件监听器到父元素上，而不是为每个子元素都绑定一个事件监听器。
    • 降低内存消耗：减少了事件监听器的数量，从而降低了内存消耗。
    • 提高页面性能：减少了事件监听器的数量，从而提高了页面性能。

    我们可以用一个表格来对比一下传统方式和事件委托的性能差异：

    方法 事件监听器数量 内存消耗 性能
    传统方式 子元素数量 高 较低
    事件委托 1 低 较高

  2. 代码简洁：

    • 简化代码结构：避免了为每个子元素都编写事件监听器的代码。
    • 易于维护：修改事件处理逻辑只需要修改父元素的事件监听器，而不需要修改每个子元素的事件监听器。
    • 方便动态添加元素：动态添加的元素无需手动绑定事件监听器，直接继承父元素的事件监听器。

四、事件委托的应用场景：哪里需要它？

事件委托的应用场景非常广泛，主要适用于以下情况：

  1. 大量相似元素需要绑定事件： 例如，列表中的每个 <li> 元素、表格中的每个 <td> 元素等。
  2. 动态添加的元素需要绑定事件： 例如，通过 AJAX 请求动态加载的数据，或者通过 JavaScript 动态创建的元素。
  3. 需要优化性能的场景： 例如，复杂的交互式应用，或者需要处理大量数据的应用。

举几个常见的例子：

  • 导航菜单： 为每个菜单项绑定点击事件，可以使用事件委托来提高性能。
  • 表格： 为每个单元格绑定点击事件，可以使用事件委托来简化代码。
  • 评论列表： 为每个评论的回复按钮绑定点击事件，可以使用事件委托来处理动态添加的评论。

五、事件委托的实践：代码示例与技巧

光说不练假把式，咱们来几个实际的代码示例，演示如何使用事件委托：

示例 1：动态添加的列表项

<ul id="dynamicList">
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
</ul>

<button id="addButton">Add Item</button>

<script>
  const dynamicList = document.getElementById('dynamicList');
  const addButton = document.getElementById('addButton');
  let itemCount = 4;

  dynamicList.addEventListener('click', function(event) {
    if (event.target.tagName === 'LI') {
      alert('你点击了：' + event.target.textContent);
    }
  });

  addButton.addEventListener('click', function() {
    const newItem = document.createElement('li');
    newItem.textContent = 'Item ' + itemCount++;
    dynamicList.appendChild(newItem);
  });
</script>

在这个例子中，我们使用事件委托为动态添加的 <li> 元素绑定点击事件。无论添加多少新的 <li> 元素，都不需要手动绑定事件监听器。

示例 2：表格单元格的编辑

<table id="myTable">
  <thead>
    <tr>
      <th>Name</th>
      <th>Age</th>
      <th>City</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>John Doe</td>
      <td>30</td>
      <td>New York</td>
    </tr>
    <tr>
      <td>Jane Smith</td>
      <td>25</td>
      <td>London</td>
    </tr>
  </tbody>
</table>

<script>
  const myTable = document.getElementById('myTable');

  myTable.addEventListener('click', function(event) {
    if (event.target.tagName === 'TD') {
      // 获取被点击的单元格的内容
      const cellContent = event.target.textContent;

      // 创建一个输入框，用于编辑单元格内容
      const input = document.createElement('input');
      input.type = 'text';
      input.value = cellContent;

      // 替换单元格的内容为输入框
      event.target.textContent = '';
      event.target.appendChild(input);

      // 当输入框失去焦点时，保存修改后的内容
      input.addEventListener('blur', function() {
        event.target.textContent = input.value;
      });

      // 当按下回车键时，保存修改后的内容
      input.addEventListener('keydown', function(event) {
        if (event.key === 'Enter') {
          event.target.textContent = input.value;
        }
      });

      // 自动聚焦到输入框
      input.focus();
    }
  });
</script>

在这个例子中，我们使用事件委托为表格的每个 <td> 元素绑定点击事件，实现单元格的编辑功能。

技巧：合理利用 event.target 和 event.currentTarget

  • event.target：触发事件的实际元素。
  • event.currentTarget：绑定事件监听器的元素。

在事件委托中，event.target 通常是我们需要关注的元素，因为它告诉我们是哪个子元素触发了事件。

技巧：使用 closest() 方法查找特定祖先元素

有时候，我们需要判断事件的目标元素的某个祖先元素是否是特定的元素。可以使用 closest() 方法来查找：

myList.addEventListener('click', function(event) {
  const listItem = event.target.closest('li');
  if (listItem) {
    alert('你点击了：' + listItem.textContent);
  }
});

closest() 方法会从目标元素开始，向上查找最近的匹配选择器的祖先元素。如果找到了，就返回该元素；否则，返回 null。

技巧：避免过度委托

虽然事件委托很强大，但也不要过度使用。如果只需要为几个静态元素绑定事件，直接绑定事件监听器可能更简单。

六、事件委托的缺点：需要注意的地方

事件委托虽然有很多优点，但也有一些缺点需要注意：

  1. 事件类型限制： 并非所有事件都支持冒泡。例如，focus、blur、load、unload 等事件不支持冒泡，因此无法使用事件委托。
  2. 事件处理逻辑复杂化： 需要在事件监听器中判断事件的目标元素，增加了事件处理逻辑的复杂性。
  3. 可能与其他事件处理冲突： 如果父元素上已经绑定了其他事件监听器，可能会与事件委托的处理逻辑发生冲突。

七、总结：事件委托是前端开发的利器

总而言之，事件委托是一种非常实用的前端开发技巧。它可以有效地提高页面性能，简化代码结构，方便动态添加元素。虽然有一些缺点需要注意，但只要合理使用，事件委托绝对是前端开发的利器。

希望今天的讲座对大家有所帮助。记住，偷懒是程序员的美德，学会使用事件委托，让你更轻松地写出高效、优雅的代码。

下次再见！

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注