Event handling and propagation¶

Event handling¶

There are several HTML events which can be used to trigger functions. Check the previous lesson on HTML events in case you missed it.

In JavaScript, an event is an action that can be detected by JavaScript. It could be a user action (like a click, key press, or mouse move) or a browser action (like a page load). Event handling involves defining a function (the event handler) that will be executed when the event occurs.

Here’s an example of an event handler for a button click:

let button = document.getElementById('myButton');

button.addEventListener('click', function() {
    console.log('Button clicked!');
});

In this example, the addEventListener method is used to attach the ‘click’ event to the button. The second argument is the event handler function that will be executed when the event occurs.

addEventListener adds event listeners to an element without overwriting the existing event handlers/listeners. It also allows to add multiple handlers for the same event.

You can also add event handles in the following way, but this will overwrite the existing event handler.

var x = document.getElementById("demo");
x.onclick = function () {
    ...
}
//The onclick event gets overwritten.

Event Propagation¶

Event propagation is the process that determines how an event is propagated through the DOM tree. It consists of three phases:

Capturing Phase: The event starts from the top of the DOM tree and travels down to the target element.
Target Phase: The event has reached the target element.
Bubbling Phase: The event bubbles up from the target element back to the top of the DOM tree.

By default, event handlers are executed in the bubbling phase. However, you can change this behavior by setting the third argument of addEventListener to true to handle the event in the capturing phase.

button.addEventListener('click', function() {
    console.log('Button clicked!');
}, true);  // Handle event in capturing phase

Event.stopPropagation():

The stopPropagation method can be used to stop the event from propagating further. This means that if you call event.stopPropagation() in an event handler, the event will not be propagated to any other event handlers.

button.addEventListener('click', function(event) {
    event.stopPropagation();
    console.log('Button clicked!');
});

In this example, if there are any other ‘click’ event handlers on parent elements of the button, they will not be executed.

Event.preventDefault():

The preventDefault method can be used to prevent the default action of the event. For example, you can use event.preventDefault() to prevent a form from being submitted or a link from being followed.

let link = document.getElementById('myLink');

link.addEventListener('click', function(event) {
    event.preventDefault();
    console.log('Link clicked!');
});

In this example, if you click the link, the ‘click’ event handler will be executed, but the link will not be followed.

Effect of handling phase¶

If you choose to handle events in the capturing phase instead of the bubbling phase, the main difference you’ll notice is the order in which event handlers are executed. In the capturing phase, event handlers are executed from the outermost element (typically the window object) to the innermost target element. In the bubbling phase, event handlers are executed from the innermost target element to the outermost element.

Here’s an example to illustrate this:

// HTML structure
<div id="parent">
    <button id="child">Click me</button>
</div>

// JavaScript
let parent = document.getElementById('parent');
let child = document.getElementById('child');

parent.addEventListener('click', function() {
    console.log('parent');
}, true);  // Set to handle in capturing phase

child.addEventListener('click', function() {
    console.log('child');
}, false);  // Set to handle in bubbling phase

In this example, if you click the button, you’ll see ‘parent’ logged to the console before ‘child’. This is because the parent’s event handler is set to handle the event in the capturing phase, so it’s executed before the event reaches the target child element.