向 html dom 元素的所有子节点发出事件

Question

我需要向元素的所有深层子节点发出事件。 我正在寻找的是使用自定义事件或等效的事件捕获。

解决方案之一是递归循环遍历所有子节点，然后向每个子节点发出事件，但速度较慢。

有没有更好的解决方案？

Answer 1

不确定深层子节点是什么意思，但querySelectorAll可以从根节点开始选择任何嵌套级别的所有元素：

 const elems = root.querySelectorAll("*") const customEvent = new CustomEvent('custom') elems.forEach(el => { el.addEventListener("custom", (e) => console.log("Custom event received on element:", e.currentTarget)) el.dispatchEvent(customEvent) })

 <div id="root"> <button>B1</button> <p>P1</p> <div> <p>P2</p> <p>P3</p> <button>B2</button> </div> </div>