emit events to all child nodes of a html dom element

Question

I need to emit an event to all deep childNodes of an element. What i am looking is event capturing using custom events or something equivalent.

one of the solution is to recursive loop through all children and then emit events to each one, but it is slower.

is there any better solution ?

Answer 1

Not sure what you mean with deep childNodes, but querySelectorAll can select all elements at any nesting level starting from a root node:

 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>