From the course: JavaScript: Enhancing the DOM

Unlock this course with a free trial

Join today to access over 25,300 courses taught by industry experts.

Event propagation: Capturing and bubbling

Event propagation: Capturing and bubbling

From the course: JavaScript: Enhancing the DOM

Start my 1-month free trial Buy for my team

Event propagation: Capturing and bubbling

“

- [Instructor] Let's talk about event propagation, which happens in two ways, capturing and bubbling. In order to explain this well, I want to take you through a code example. Here we have a simple button. It has a click event, and it prints "button clicked." There's a div around a button. Let's change your code a bit so that instead whenever the div gets clicked, it logs div clicked. As you can see, the div is the inner container. So I'm going to change this to inner container, and here I'm saying div clicked. Now when I click on the button, it's saying div clicked, why? Well, the button is in the div, so the button is part of the div, so indeed the div was clicked. Alright, so far so good I suppose. But what if both of them had a click event listener? Let's modify our code again. So now both the button and the div have a click event listener. And when I click it, as you can see, it works inside out. First it logs that the button was clicked, and then it works its way out to the…

Contents