$(document).on() 在纯 JavaScript 中？

Posted 2023-02-19

【中文标题】$(document).on() 在纯 JavaScript 中？

【英文标题】：$(document).on() in plain JavaScript?

【发布时间】：2017-03-29 13:16:36

【问题描述】：

在 jQuery 中有 .on() 可以用作：

$(document).on('click', '.foo', function()  /* ... */ );

这会侦听所有具有 .foo 类的 DOM 元素上的点击事件。 但是，这也会监听以后添加到 DOM 中的任何最终元素，因此它不等于：

var elements = document.getElementsByClassName('foo');
for (var element in elements) 
  element.addEventListener('click', function()  /* ... */ );

如何在纯 javascript 中做到这一点？我应该使用MutationObserver 吗？如果是这样，那怎么办？如果不是，那是什么？

【问题讨论】：

不查看 jquery 源（即“纯 JavaScript”），我怀疑它会向 document 添加一个侦听器，然后使用 sizzle 来检查事件源是否与选择器匹配。

【参考方案1】：

这称为事件委托，在纯 javascript 中，您可以将点击事件附加到父元素，然后在点击时检查点击的元素是否与您要点击的目标匹配并执行您想要的操作，如下例所示：

document.getElementById("parent-item").addEventListener("click", function(e) 
      // e.target is the clicked element!
      // If it was an item with class 'foo'
      if(e.target && e.target.className == "foo") 
         console.log("foo "+e.target.innerText+" was clicked!");
    
);

希望这会有所帮助。

document.getElementById("parent-item").innerhtml += "<li class='foo'>Item 3</li>";

document.getElementById("parent-item").addEventListener("click", function(e) 
  if(e.target && e.target.className == "foo") 
    console.log("foo "+e.target.innerText+" was clicked!");
  
);

<ul id="parent-item">
  <li class='foo'>Item 1</li>
  <li class='foo'>Item 2</li>
</ul>

【讨论】：

需要注意的一个有趣的事情是，通过事件委托，开发人员很难知道 DOM 元素交互会触发事件，因为 Web 浏览器中的开发人员工具并没有明确指出这一点大大地。当你直接监听一个事件时，它会在 DOM 树检查器中显示一个图标。有趣的是，jQuery 以某种方式将每个元素唯一地绑定在一起，以便它们显示在开发人员工具中。

没错，弗雷德。

如果答案是您正在寻找的答案，请将其标记为对未来的读者正确，谢谢。

我遇到了同样的问题，很好地使用了事件委托！