.addEventListener()

Listen for an event on a node.

target.addEventListener(type, callback, capture);

Appends an event listener for events whose type attribute is type to target. The callback is called when the event is dispatched.

When an event is dispatched, it can call the event listeners of a target’s ancestors as well. First, ancestors who have event listeners with capture set to true are called, from the root to the target. Then, the target’s own event listeners are called. Finally, if the event’s bubbles attribute is set to true, the target’s ancestors’ event listeners are called again, this time from the target going up until the root.

See also: .removeEventListener(), .dispatchEvent()

Example

HTML:

<ul class="list-one">
    <li class="one">Item 1</li>
    <li>
        <ul class="list-two">
            <li class="two">Item 2</li>
            <li class="three">Item 3</li>
        </ul>
    </li>
</ul>

JavaScript:

function test(e) {
 console.log(e.currentTarget, e.target);
}
document.query(".list-one").addEventListener("hey", test, true);
document.query(".list-two").addEventListener("hey", test);
document.query(".three").addEventListener("hey", test);

var ev = new Event("hey", {bubbles: true});
document.query(".three").dispatchEvent(ev);

This prints out in the console:

<ul class="list-one">...</ul>, <li class="three">Item 3</li>
<li class="three">Item 3</li>, <li class="three">Item 3</li>
<ul class="list-two">...</ul>, <li class="three">Item 3</li>