tutorials/javascript/event_delegation_advanced

JavaScript 事件委托的高级应用

事件委托是一种利用事件冒泡原理，减少事件监听器数量，提高性能的编程技术。在高级应用中，事件委托可以用来处理复杂页面交互，例如动态生成的DOM元素。

基本概念

事件冒泡：当子元素触发事件时，事件会沿着DOM树向上传递，直到到达document。
事件委托：将事件监听器绑定到父元素上，利用事件冒泡，处理所有子元素的事件。

高级应用

动态内容的事件处理：当页面内容动态生成时，如果每个子元素都绑定事件监听器，会增加内存和性能负担。使用事件委托，只需要在父元素上绑定一个事件监听器即可。

document.getElementById('parent').addEventListener('click', function(event) {
  if (event.target.matches('.class-name')) {
    // 处理点击事件
  }
});

列表项的选择：在表格或列表中，可以使用事件委托来选择列表项。

document.getElementById('table').addEventListener('click', function(event) {
  if (event.target.tagName === 'TD') {
    // 获取行数据并处理
  }
});

滚动事件监听：使用事件委托可以监听滚动事件，而不是给每个元素绑定滚动监听。

document.getElementById('container').addEventListener('scroll', function() {
  // 处理滚动事件
});

图片示例

JavaScript 事件委托

扩展阅读

了解更多关于JavaScript事件委托的高级应用，请阅读《JavaScript高级程序设计》。

---