DEV Community

loading...

A short story about events in Javascript

Miguel Ruiz
200 OK. Mediterranean code maker.
Updated on ・2 min read

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>
Enter fullscreen mode Exit fullscreen mode
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");
});
Enter fullscreen mode Exit fullscreen mode

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:

bubbling

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>
Enter fullscreen mode Exit fullscreen mode
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");
});
Enter fullscreen mode Exit fullscreen mode

Execution will end as:

Parent clicked
Child clicked

capturing

Conclusion

In the event flow, Event target has two phases one is at the end of event capturing and starting of event bubbling.

all

Discussion (3)

Collapse
spicalous profile image
Ben Lertlumprasertkul

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!

Collapse
migueloop profile image
Miguel Ruiz Author

Absolutely Ben, I copied twice the same. Thanks so much!

Collapse
tracygjg profile image
TGJ Gilmore • Edited

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.