如何将事件附加到 DOM 的所有节点？ [关闭]

Posted 2023-02-19

【中文标题】如何将事件附加到 DOM 的所有节点？ [关闭]

【英文标题】：How can i attach an event to all my nodes of a DOM? [closed]

【发布时间】：2017-11-26 01:00:41

【问题描述】：

我只是尝试将所有节点附加到单击事件。但我不明白如何在onload 时添加它们。 我只是试图找出从点击位置到根节点的节点列表的完整路径。这是我的代码，我无法识别作为 addEvent() 参数传递的内容。

    function addEvent(node)  // i used this function in onload event
        if(node == null) return;
        node.onclick = catchClickedItem;
        for(var i = 0; i < node.childNodes.length; i++)
            addEvent(node.childNodes[i]);
        
    

    function catchClickedItem(e)
        alert(e.target);    
    

我试图用这个添加 addEvent ：

window.onload = addEvent

我遇到了这个错误

Uncaught TypeError: Cannot read property 'length' of undefined

【问题讨论】：

您能说明如何调用您的addEvent() 函数吗？

childNodes 还包括Text 和评论节点。你真的想要这个吗？此外，“这不起作用”不是问题描述。

寻求调试帮助的问题（“为什么这段代码不起作用？”）必须包括所需的行为、特定的问题或错误以及重现它所需的最短代码在问题本身。没有清晰的问题陈述的问题对其他读者没有用处。请参阅：How to create a Minimal, Complete, and Verifiable example。

我 100% 确定您不需要将事件附加到所有节点

我只是尝试检查是否可以将相同的事件附加到所有节点，甚至是文本节点。

【参考方案1】：

向每个节点添加事件侦听器是个坏主意。代之以委托。也使用addEventListener 代替onclick。

document.addEventListener("click", function(e) 
  alert(e.target.innerhtml);
  e.stopPropagation();
);

<div>
  <div>hello</div>
  <div>
    <div>world</div>
    <div>
      <div>foo</div>
    </div>
  </div>
</div>