Events in JavaScript act like notifications that a user interaction, or other action, has taken place. For instance, when you click on a form button, your browser generates an event to indicate this has happened. Typing in a search box also raises events and this is how auto-suggest often works online.
In JavaScript, events that involve user interaction usually fire against specific elements. For example, clicking a button raises an event against that button. But events also propagate: they fire against other elements in the document hierarchy.
Read on to learn all about event propagation and the two distinct types available.
What Is Event Handling in JavaScript?
You can use JavaScript code to catch, and respond to, events that a web page raises. You can do this to override default behavior or take action when no default exists. A common example is form validation. Event handling allows you to interrupt the normal process of form submission.
Consider this example:
<div>
<button id="button">Click Me</button>
</div>
<script>
const button = document.getElementById("button");
button.addEventListener("click", ()=>{
alert("Hello World");
});
</script>
The above code has a button element with an id named button. It has a click event listener that displays an alert with the message Hello World.
What Is Event Propagation?
Event propagation describes the order in which the events travel through the DOM tree when the web browser fires them.
Assume there is a form tag inside a div tag, and both have onclick event listeners. Event Propagation describes how one event listener may fire after the other.
There are two types of propagation:
- Event bubbling, by which events bubble upwards, from child to parent.
- Event capturing, by which events travel downwards, from parent to child.
What Is Event Bubbling in JavaScript?
Event bubbling means the direction of event propagation will be from the child element to its parent element.
Consider the following example. It has three nested elements: div, form, and button. Each element has a click event listener. The browser displays an alert with a message when you click on each element.
By default, the order in which the web browser displays alerts will be button, form, then div. The events bubble up from child to parent.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Event propagation example</title>
</head>
<body>
<div id="div" style="background:#22577E; color:white">
div
<form id="form" style="background:#5584AC; color:white">
form <br/><br/>
<button id="button" style="background:#95D1CC; color:#22577E; border: solid 2px #22577E;
padding: 15px 40px;">
Button
</button>
</form>
</div>
<script>
const div = document.getElementById("div");
const form = document.getElementById("form");
const button = document.getElementById("button");
div.addEventListener("click", ()=>{
alert("div");
});
form.addEventListener("click", ()=>{
alert("form")
});
button.addEventListener("click", ()=>{
alert("button")
});
</script>
</body>
</html>
What Is Event Capturing?
With event capturing, the order of propagation is the opposite of bubbling. Otherwise, the concept is identical. The only difference with capturing is that events occur from parent to child. In contrast to the previous example, with event capturing, the browser will display alerts in this order: div, form, and button.
To achieve event capturing, you need to make just one change to the code. The third parameter of addEventListener() defines the type of propagation. It is false by default, to represent bubbling. To enable event capturing, you need to set the second parameter to true.
div.addEventListener("click", ()=>{
alert("div")
}, <strong>true</strong>);
form.addEventListener("click", ()=>{
alert("form")
}, <strong>true</strong>);
button.addEventListener("click", ()=>{
alert("button")
}, <strong>true</strong>);
How Can You Prevent Event Propagation?
You can stop the propagation of events using the stopPropagation() method. The addEventListener() method accepts an event name and a handler function. The handler takes an event object as its parameter. This object holds all the information about the event.
When you invoke the stopPropagation() method, the event will stop propagating from that point. For example, when you use stopPropagation() on the form element, events will stop bubbling up to the div. If you click the button, you'll see events raised on the button and form, but not the div.
form.addEventListener("click", (e)=>{
<strong>e.stopPropagation();</strong>
alert("form");
});
JavaScript Has a Lot of Power Under the Hood
JavaScript's event handling is powerful, comparable to many full-blown interface languages. When you're developing interactive web applications, it's a vital part of your toolbox. But there are many other advanced topics to grasp. For professional JavaScript developers, there's a lot to learn!
If you want to learn to code JavaScript like a pro check out our guide to clever-one liners and prepare to wow in your next interview.