如何为动态创建的特定类DOM元素添加点击事件？TypeScript实现问题

看起来你在处理动态创建的.foo元素点击事件时遇到了两个典型的TypeScript/JS兼容性问题：NodeList无法直接使用forEach，以及Array.from不被识别。下面给你几个可行的解决方案，顺便补充一下动态元素绑定的最佳实践：

一、解决NodeList遍历问题 #

方案1：使用for...of循环遍历 #

TypeScript对for...of支持很好，这种方式不需要额外转换，直接遍历NodeList即可：

const foos = document.body.querySelectorAll(".foo");
for (const item of foos) {
  item.addEventListener("click", () => {
    console.log(item);
  });
}

方案2：用Array.prototype.slice.call转换为数组 #

如果你的TypeScript环境不支持Array.from，这个老方法可以完美替代，它能把类数组对象转换成真正的数组：

const foos = document.body.querySelectorAll(".foo");
const fooArray = Array.prototype.slice.call(foos) as HTMLElement[];
fooArray.forEach(item => {
  item.addEventListener("click", () => {
    console.log(item);
  });
});

方案3：配置TypeScript的Lib选项 #

Array.from报错是因为你的TypeScript配置里没有包含ES2015及以上的库定义。打开你的tsconfig.json，修改lib字段，添加"ES2015"或者更高版本：

{
  "compilerOptions": {
    "lib": ["ES2015", "DOM"]
  }
}

配置后，Array.from(foos)就能正常被识别，NodeList的forEach也能直接使用了。

二、动态元素的最佳绑定方式：事件委托 #

另外要注意，如果你是动态创建的.foo元素，上面的方法只有在元素创建完成后执行才能生效。如果元素是后续异步生成的，更可靠的方式是用事件委托——把点击事件绑定到父元素（比如body），然后通过事件冒泡来判断目标元素：

document.body.addEventListener("click", (e) => {
  const target = e.target as HTMLElement;
  if (target.classList.contains("foo")) {
    console.log(target);
    // 这里写你的点击逻辑
  }
});

这种方式不管元素是何时创建的，只要符合选择器就能触发事件，不用每次创建元素后都重新绑定。

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