A short story about events in Javascript

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.