JavaScript 中请解释什么是事件代理？

事件代理（Event delegation）是一种利用事件冒泡机制的技术，通过将事件绑定到其父元素而不是直接绑定到子元素上，以处理子元素触发的事件。

工作原理：

1. 事件冒泡： 当子元素上的事件（比如点击事件）被触发时，事件会沿着 DOM 树向上传播，即从子元素一直冒泡至祖先元素。

2. 利用冒泡： 通过在父元素上监听事件，可以捕获到子元素上触发的事件。这样就不需要在每个子元素上都绑定事件监听器，减少了事件处理器的数量。

优点：

1. 性能优化： 减少了事件处理器的数量，提高了性能，尤其在大量子元素存在的情况下效果更明显。

2. 动态元素处理： 对于动态添加的元素，不需要重新绑定事件，因为事件委托作用于整个父元素。

示例：

假设有一个列表，我们想要点击列表项时获取其内容：

HTML 结构：

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

JavaScript 代码：

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

// 使用事件代理，将事件绑定到父元素上
parentList.addEventListener('click', function(event) {
  if (event.target.tagName === 'LI') {
    console.log(event.target.textContent);
  }
});

在这个例子中，通过将事件监听器绑定到父元素 parentList 上，我们利用事件冒泡捕获到了子元素 <li> 的点击事件。通过判断 event.target，我们可以得知点击的具体是哪个子元素，从而执行相应的操作。

事件代理使得针对多个子元素的相同操作变得更加简洁和高效。

Was this helpful?

YesNo

0 / 0