JavaScript Introduction | Events | Calling Event Listeners

Calling Event Listeners

After an event listener is registered, when an event of the specified type occurs on the corresponding object or element, the browser automatically calls the registered event listener. At this time, the event listener receives an event object as an argument and refers to the delivered event object through an identifier.

Event Object

An event object is an object related to a specific type of event.

An event object stores detailed information about that event type. Every event object has a type property that indicates the event type and a target property that indicates the event target. This event object is passed as an argument when the event listener is called.

var btn = document.getElementById("btn"); // Selects the element whose ID is "btn".
btn.addEventListener("click", clickBtn);  // Registers a click event listener on the selected element.
function clickBtn(event) {
    document.getElementById("text").innerHTML =
    "The type of this event is " + event.type + ", and the target of the event is " + event.target + ".";
}

Event Call Order

With the addEventListener() method, you can register multiple event listeners for one event type. When an event of a specific type occurs, the browser calls events in the following order.

1. It first calls the event listener registered as a property on the target object or element.
2. It then calls the event listeners registered with addEventListener() in the order they were registered.

Event Propagation

Event propagation is the process by which the browser decides which target element should run an event listener when an event occurs.

If the event target is a single object such as the Window object, event propagation does not occur. However, when an event occurs on the Document object or on an element in an HTML document, event propagation occurs to determine the target element.

Event propagation is broadly divided into two modes.

1. Bubbling
2. Capturing

Bubbling Propagation

Bubbling propagation starts from the element where the event occurred and propagates upward along the DOM tree.

In this propagation mode, after the listener of the current element runs, the listener registered on its parent element runs, and then the listener registered on that parent element’s parent runs. This event propagation continues not only through the Document object but ultimately to the Window object.

Bubbling has the advantage that an event listener common to many elements can be handled by registering it once on a common ancestor element, instead of registering it separately on each element.

// Registers click event listeners on each element using bubbling.
document.getElementById("divBox").addEventListener("click", clickDiv);
document.getElementById("paraBox").addEventListener("click", clickPara);
document.getElementById("spanBox").addEventListener("click", clickSpan);
function clickDiv(event)  { document.getElementById("text").innerHTML += "You clicked the div element!<br>"; }
function clickPara(event) { document.getElementById("text").innerHTML += "You clicked the p element!<br>"; }
function clickSpan(event) { document.getElementById("text").innerHTML += "You clicked the span element!<br>"; }

Capturing Propagation

Capturing propagation starts at the top of the DOM tree and moves downward to the element where the event occurred.

In this propagation mode, the listener of the Window object runs first, then the listener registered on the Document object, and then listeners registered on child elements run. This event propagation continues until it reaches the element where the event occurred. To use this propagation mode, pass true as the third argument of the addEventListener() method.

Capturing can let an event listener registered on an upper-level element intercept or catch the event before it is delivered to the actual event target. The technique of filtering an event in this way so that the corresponding event listener is not called is called event cancellation.

// Registers click event listeners on each element using capturing.
document.getElementById("divBox").addEventListener("click", clickDiv, true);
document.getElementById("paraBox").addEventListener("click", clickPara, true);
document.getElementById("spanBox").addEventListener("click", clickSpan, true);

Capturing propagation cannot be used in Internet Explorer 8 and earlier or Opera 6 and earlier, which do not support the addEventListener() method.

Canceling an Event’s Default Behavior

When a click event occurs on an HTML <a> element, the browser follows the specified address and opens a new web page. Certain events have predefined default behavior like this. However, you can cancel the execution of this default behavior by using the preventDefault() method or the returnValue property.

// Registers click event listeners on each element using bubbling.
document.getElementById("divBox").addEventListener("click", clickDiv);
document.getElementById("paraBox").addEventListener("click", clickPara);
document.getElementById("linkBox").addEventListener("click", clickLink);
function clickDiv(event) { document.getElementById("text").innerHTML += "You clicked the div element!<br>"; }
function clickPara(event) { document.getElementById("text").innerHTML += "You clicked the p element!<br>"; }
function clickLink(event) {
    event.preventDefault(); // Cancels the link's default behavior.
    document.getElementById("text").innerHTML += "The link's default behavior was prevented!<br>";
    document.getElementById("text").innerHTML += "You clicked the a element!<br>";
}

Canceling Event Propagation

In addition to the default behavior of an event, you can also cancel event propagation. You can cancel event propagation by using the stopPropagation() method or the cancelBubble property.

function clickLink(event) {
    event.preventDefault();  // Cancels the link's default behavior.
    document.getElementById("text").innerHTML += "The link's default behavior was prevented!<br>";
    event.stopPropagation(); // Cancels event propagation.
    document.getElementById("text").innerHTML += "Event propagation was stopped!<br>";
}