In the JavaScript, Event Flow process is completed by three concepts :
- Event Capturing
- Event Target
- Event Bubbling
Events are actions or occurrences that happen in the system you are programming, which the system tells you about so you can respond to them in some way if desired.
Event Bubbling
Event Bubbling is the event starts from the deepest element or target element to its parents, then all its ancestors which are on the way to bottom to top. At present, all the modern browsers have event bubbling as the default way of event flow.
Example
<div id="parent">
<button id="child">Child</button>
</div>
var parent = document.querySelector('#parent');
parent.addEventListener('click', function(){
console.log("Parent clicked");
});
var child = document.querySelector('#child');
child.addEventListener('click', function(){
console.log("Child clicked");
});
Execution will end as:
Child clicked
Parent clicked
When you click on the button, the event passes from inner event target (Button whose id is the child) to Document. Click event pass in the following order:
If you want to stop the event bubbling, you can use event.stopPropagation() method.
Event Capturing
Event Capturing is the event starts from top element to target element. Modern browser doesn’t support event capturing by default but we can achieve that by code in JavaScript.
<div id="parent">
<button id="child">Child</button>
</div>
var parent = document.querySelector('#parent');
var child = document.querySelector('#child');
parent.addEventListener('click', function(){
console.log("Parent clicked");
},true);
child.addEventListener('click', function(){
console.log("Child clicked");
});
Execution will end as:
Parent clicked
Child clicked
Conclusion
In the event flow, Event target has two phases one is at the end of event capturing and starting of event bubbling.
Top comments (3)
Clear and concise, nice post! However, I think there may be a small typo in the code examples. They are both the same, I think the first example needs to be amended to not have the capture option on the parent event listener!
Absolutely Ben, I copied twice the same. Thanks so much!
Fine article. I would just like to highlight that addEventListener can take a third argument to provide options. One of the option enables the capture mechanism you described. I am not sure about the level of browser support but it has been around for a while so there should be no need for a workaround/fallback.