如何用JavaScript为含动态生成li的ul创建动态点击事件监听器

嘿，这问题我熟！原生JS完全可以搞定动态列表的点击事件，给你两种实用方案，按需选就行：

这是处理动态元素事件的最优解，核心思路是把事件监听器绑定到静态存在的父元素（也就是你的ul）上，然后通过事件冒泡机制判断点击的目标是不是li元素。不管li是页面加载时就有，还是之后动态生成的，都能触发事件。

// 获取你的ul元素（如果有id/class就用更精准的选择器，比如getElementById）
const todoList = document.querySelector('ul');

// 给父元素绑定点击事件
todoList.addEventListener('click', function(event) {
  // 确认点击的目标是li元素（tagName返回的是大写，所以要写LI）
  if (event.target.tagName === 'LI') {
    // 这里写你的点击逻辑，比如切换完成状态、删除项等
    console.log('你点击了待办项：', event.target.textContent);
    // 举个实际例子：给点击的项添加删除线样式
    event.target.classList.toggle('completed');
  }
});

为什么推荐这个？因为不用给每个li单独绑定事件，节省内存，而且完全适配动态生成的元素，不用每次新增li都重复写绑定代码。

如果你的每个待办项需要有独立的点击逻辑，或者你更习惯这种直接的写法，可以在创建li元素的同时，给它绑定点击事件：

// 封装一个生成待办项的函数
function addTodoItem(todoText) {
  // 创建li元素
  const newLi = document.createElement('li');
  newLi.textContent = todoText;

  // 直接给这个新li绑定点击事件
  newLi.addEventListener('click', function() {
    console.log('点击了动态生成的待办项：', this.textContent);
    // 这里写你的逻辑，比如删除该项
    this.remove();
  });

  // 把li添加到ul中
  document.querySelector('ul').appendChild(newLi);
}

// 调用示例：添加一个新的待办项
addTodoItem('搞定原生JS动态事件');

这种方式的好处是逻辑直观，每个li的事件处理可以单独定制，但如果生成大量待办项，性能会比事件委托稍差一点。

小提示 #

如果页面上有多个ul，记得用更精准的选择器定位你的待办列表，比如给ul加个id（比如id="todo-list"），然后用document.getElementById('todo-list')来获取，避免影响其他列表。

内容的提问来源于stack exchange，提问作者miatech