如何在不使用 jQuery 的情况下监听动态创建的元素上的事件？

如何向动态创建的元素添加事件侦听器

在包含动态内容的网页上工作时，可能需要向不包含动态内容的元素添加事件侦听器最初出现在页面上。本指南概述了一种不依赖 jQuery 即可实现此目的的方法。

原始方法涉及利用 doc.body.addEventListener('click') 来处理页面加载时现有元素的事件。然而，对于动态生成的元素，需要更健壮的解决方案。

委托和事件传播

动态添加事件监听器的关键是事件委托。通过这种方法，您可以将单个事件侦听器附加到父元素（例如正文），然后检查事件的目标以确定单击的特定元素。

示例代码

<code class="javascript">document.querySelector('body').addEventListener('click', function(event) {
  if (event.target.tagName.toLowerCase() === 'li') {
    // Perform actions specific to 'li' elements
  }
});</code>

在此示例中，事件侦听器附加到正文。当单击主体内的元素时，将检查事件的目标。如果目标是 li 元素，则执行所需的操作。

注意事项

请注意，提供的代码与现代浏览器兼容。为了使浏览器与旧版本的 Internet Explorer 兼容，可能需要围绕本机事件函数的自定义包装器。

以上是如何在不使用 jQuery 的情况下监听动态创建的元素上的事件？的详细内容。更多信息请关注PHP中文网其他相关文章！