纯JS如何为动态创建的指定class元素绑定addEventListener点击事件

实现方案 #

你之前的两种方案仅能给页面初始化时已存在的.bold元素绑定事件，后续动态插入的元素没有被绑定监听，因此无法触发对应逻辑。正确的实现方式是使用事件委托，将监听事件绑定到一开始就存在的父级容器#editor上，利用事件冒泡机制匹配目标元素：

const editor = document.getElementById('editor');
editor.addEventListener('click', function (e) {
  // 匹配点击的元素是否带有bold类
  if (e.target.classList.contains('bold')) {
    // 此处写入你要执行的事件逻辑
    console.log('点击了bold元素', e.target);
  }
});

兼容嵌套元素的优化方案 #

如果你的.bold元素内部还存在嵌套的子元素，点击子元素时e.target会指向内层子元素，此时可以用closest方法向上查找匹配的.bold元素：

const editor = document.getElementById('editor');
editor.addEventListener('click', function (e) {
  const boldElement = e.target.closest('.bold');
  if (boldElement) {
    // 此处写入你要执行的事件逻辑，boldElement就是匹配到的.bold元素
    console.log('触发bold事件', boldElement.textContent);
  }
});

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