Javascript 是否使用通用文档。addEventListener（“click”，f）listener的格式比它的特定用法慢或弱？

我的代码是：

document.addEventListener('click', function(ev){
  if(ev.path[0].className == 'linkTogether'){//do something}
  if(ev.path[0].id == "createNewPage"){//do something}
});

对于动态创建的按钮和节点，它实际上工作得很好，但感觉有些不对劲。所以我想知道这是否是最佳实践，或者是否有更好的方法将事件侦听器添加到动态创建的元素中

谢谢，

---

Jack

在特定情况下，如果有大量对象以相同的方式运行，则可以使用此技术（将事件侦听器添加到其父对象）来提高脚本的性能

然而，在一个普通页面中，您只需访问许多不同的对象，并通过所有对象进行迭代，以检查您所单击的对象是否更快

---

下面是一个用于您所指技术的示例-事件委派。

这是创建事件侦听器的正确模式，该侦听器将用于动态添加的元素。它本质上与jQuery的事件委派方法（例如）使用的方法相同

但是，它确实会影响性能。每次单击文档中的任意位置时，代码都将运行，并且必须遍历需要检查的整个事件绑定列表。您可以通过将事件侦听器添加到更具体的元素来改进这一点。如果动态元素总是添加到特定的DIV中，请将侦听器添加到该DIV，而不是

文档

---

这也避免了事件委派的另一个陷阱。事件委派取决于从内部元素到其所有容器的冒泡事件。但是，如果在调用过程中有任何处理程序调用

event.stopPropagation

，则该事件将不会出现在

文档中。如果将侦听器添加到较低的元素，则不太可能发生类似的冲突。
我想补充的是，如果动态创建元素，最好将侦听器内联并在函数中过滤您想要做的事情

<div class="form_ID1" onclick="myfunction(this, event);">
... children bubbling 
... Use if statements in caught js myFunction function.

即使在这种情况下，也可以通过在弹出窗口的父DIV中插入onblur=“myfunction”（this）；来解决问题。
因此，每次单击页面中的任何位置时，都会执行此代码？这里对集中式委托事件处理与直接元素事件处理进行了非常详细的讨论：。
if (clicked.className != popup.className) popup.remove()