JS 动态添加元素并绑定事件，造成程序重复执行的深层原因

2024-02-03 05:26:09

动态添加元素与事件绑定

在现代网络开发中，动态添加元素和绑定事件是实现交互式和动态网页的常见做法。例如，您可能需要在用户单击按钮时动态添加一个新的列表项，或者在用户滚动页面时动态加载更多内容。为了响应这些动态添加的元素，您需要绑定事件处理程序。

然而，在某些情况下，动态添加元素并绑定事件可能会导致程序重复执行。这是因为当您添加一个新的元素时，您也需要为该元素绑定一个事件处理程序。但是，如果该元素的父元素已经绑定了相同的事件处理程序，那么当该元素被添加时，该事件处理程序就会被重复绑定。这会导致当触发该事件时，该事件处理程序会被执行多次。

事件委托

事件委托是一种解决此问题的技术。事件委托利用事件冒泡的特性，将事件处理程序绑定到父元素，而不是直接绑定到子元素。当子元素触发事件时，该事件将向上冒泡到父元素，然后由父元素上的事件处理程序来处理。这样，就不需要为每个子元素单独绑定事件处理程序，从而避免了重复执行的问题。

以下是如何使用事件委托在 JavaScript 中绑定事件处理程序的示例：

// 选择父元素
const parentElement = document.querySelector('.parent');

// 为父元素绑定点击事件处理程序
parentElement.addEventListener('click', (event) => {
  // 检查事件的目标元素是否匹配子元素选择器
  if (event.target.matches('.child')) {
    // 执行事件处理程序
    console.log('Child element clicked!');
  }
});

jQuery 的 on 方法

jQuery 是一个流行的 JavaScript 库，它提供了许多用于操作 DOM 和绑定事件的便捷方法。jQuery 的 on 方法可以用来为元素绑定事件处理程序。与 addEventListener 方法不同的是，on 方法支持事件委托。

以下是如何使用 jQuery 的 on 方法在 JavaScript 中绑定事件处理程序的示例：

// 选择父元素
const parentElement = $('.parent');

// 为父元素绑定点击事件处理程序
parentElement.on('click', '.child', (event) => {
  // 执行事件处理程序
  console.log('Child element clicked!');
});