The Event Delegation Pattern

Event delegation is a simple, but powerful leveraging of the DOM event system which allows for easier adding of functionality to dynamically created content; as well as being an interesting performance optimization.

Idea is you just need to add one event listener to the partent DOM element, instead of add one event listener for each child element.

For example,

<Child>
    <button>Click</button>
</Child>

child,addEventListener(
    'click',
    function onClick(event) {
        if (event.target instanceof Element && event.target.tagName === "Button") {
     addButton();
}})

Problem is if you put "click" into a Span

<Child>
    <button><span>Click</span></button>
</Child>

Previous code won't work, work around can be:

child,addEventListener(
    'click',
    function onClick(event) {
        if (event.target instanceof Element && event.target.closest('button') === "Button
 
") {
     addButton();
}})

Theclosest()method traverses theElementand its parents (heading toward the document root) until it finds a node that matches the provided selector string. Will return itself or the matching ancestor. If no such element exists, it returnsnull.