JavaScript 动态添加事件：利用事件委托解决后期元素绑定问题

事件委托的核心概念

所谓动态添加事件，其核心原理实际上是 JavaScript 中的事件委托机制。

在 JavaScript 中，事件处理程序通常只能绑定在当前文档中已存在的特定元素上。然而，开发者常遇到这样一个问题：元素是在页面加载后动态生成的，此时如何为这些新元素绑定事件处理程序？

为了清晰说明这一场景，我们假设需要为后续动态插入到当前页面的元素添加 click 事件监听。

动态元素事件绑定方案

解决该问题的关键在于使用 JavaScript 的事件委托技术。事件委托的优势在于它允许为尚未存在于 DOM 中的元素绑定事件，同时由于减少了监听器的数量，通常能带来更小的性能开销。

补充说明：以页面上存在 1000 个 div 元素为例，若直接为每个 div 绑定 click 事件，系统将创建 1000 个独立的事件监听器。而采用事件委托，只需在父级元素上绑定一个监听器即可捕获所有子元素的点击行为。希望上述解释能帮助你理解事件委托的实际含义。

读者可能更关心的是动态创建元素的具体事件添加方法，而非过多的理论阐述。

下面直接展示具体的实现代码：

// 模拟动态创建元素li
$.ajax({
  type: 'get',
  data: {},
  success: function () {        
    $('<li>').addClass('aaa').html('11111111').appendTo($('body'));
  },
});

// 给为我们刚刚动态创建的元素添加事件
$(document).on('click', 'li[class=aaa]', function(){
  console.log('ddd');
});

以上内容为关于 JavaScript 动态添加事件及事件委托的完整分享，旨在提供实用参考，欢迎支持。