概念

​ 事件委派（Event Delegation）是一种 JavaScript 事件处理的优化技巧，它通过将事件处理程序绑定到父元素而不是每个子元素来降低事件处理的复杂性和提高性能。这个技巧的核心思想是利用事件冒泡机制，将事件捕获和处理的责任委托给父元素，然后根据事件的目标来确定如何处理事件。

个人理解

个人对于事件委派的理解，事件委派就是把事件加到父元素或者父容器上面，点击子元素或者子容器的时候，会触发事件冒泡，通过事件冒泡，来处理原本委派在父元素或者父容器上面的事件。

事件委派的常见使用

  1. 列表或表格的行点击： 当你有一个动态生成的列表或表格时，你可以将点击事件处理程序添加到容器元素上，然后通过事件委派来处理每行的点击事件。这样，无论你添加了多少行，都可以轻松地管理它们的点击事件。

    1
    2
    3
    4
    5
    <ul id="myList">
      <li>Item 1</li>
      <li>Item 2</li>
      <li>Item 3</li>
    </ul>
    1
    2
    3
    4
    5
    6
    var myList = document.getElementById('myList');
    myList.addEventListener('click', function(event) {
      if (event.target.tagName === 'LI') {
        console.log('You clicked on ' + event.target.textContent);
      }
    });

  2. 导航菜单： 在网站的导航菜单中，你可以将点击事件处理程序添加到菜单容器上，并使用事件委派来处理不同菜单项的点击事件。

    1
    2
    3
    4
    5
    6
    <ul id="navMenu">
      <li><a href="#">Home</a></li>
      <li><a href="#">About</a></li>
      <li><a href="#">Services</a></li>
      <!-- 更多菜单项... -->
    </ul>
    1
    2
    3
    4
    5
    6
    7
    var navMenu = document.getElementById('navMenu');
    navMenu.addEventListener('click', function(event) {
      if (event.target.tagName === 'A') {
        // 处理菜单项的点击事件
        event.preventDefault(); // 阻止链接的默认行为
      }
    });

  3. 动态生成的元素： 如果你使用 JavaScript 动态生成页面元素，事件委派非常有用。无论何时添加新元素，它们都可以立即继承父元素上的事件处理程序。

    1
    2
    3
    <div id="container">
      <!-- 动态生成的按钮 -->
    </div>
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    var container = document.getElementById('container');
    container.addEventListener('click', function(event) {
      if (event.target.className === 'dynamic-button') {
        // 处理动态生成按钮的点击事件
      }
    });

    // 动态生成按钮
    var button = document.createElement('button');
    button.textContent = 'Click Me';
    button.className = 'dynamic-button';
    container.appendChild(button);

  4. 表单元素： 对于表单中的多个输入字段，你可以将事件处理程序添加到表单元素上，然后使用事件委派来处理各种输入字段的事件，例如输入验证或提交操作。

    1
    2
    3
    4
    5
    <form id="myForm">
      <input type="text" name="username" placeholder="Username">
      <input type="password" name="password" placeholder="Password">
      <button type="submit">Submit</button>
    </form>
    1
    2
    3
    4
    5
    var myForm = document.getElementById('myForm');
    myForm.addEventListener('submit', function(event) {
      event.preventDefault();
      // 处理表单提交事件，验证表单字段并执行提交操作
    });