Events in JavaScript

Events in JavaScript are used to send data from one element to another element within the same component or from one component to another component.

Events can also be user for animations.

There are lot of advantages with events in JavaScript with only one disadvantage. This whole article is about the advantages that we can get and how to implement events in JavaScript, however, let me highlight the only disadvantage and that is it can be very confusing.

The intention of this series of articles are to make you understand all the variants of events that exists in LWC and how to implement them.

Before we move on let's look at how events propagate in general.

What's event bubbling and event capturing?

When we click on a button or any element and in case there exists any event listeners on the element it fires a JavaScript method.

Now it doesn’t end up there, once the event is fired it propagates the DOM tree and how does

There are two methodologies by which the event propagates
1. Event Bubbling
2. Event Capturing

Event Bubbling

With event bubbling when we click on a button or any element and in case there exists any event listeners on the element it fires  up a JavaScript method, it doesn’t stop there, the event propagates to it's immediate parent and it tries to check if there are any event listeners attached to that element.

If it finds any, the method will be invoked and then again the event propagates to the parent of the element.

This is called Event Bubbling. Here, events propagate from bottom to top just like how bubbles float from bottom to top when they are formed.

If you check the above example, when user clicks on the name Krishna Teja ...

1. It checks if there exists any event on the <p></p> tag.
2. If there are any it gets fired
3. Then it moves to its parent tag <span></span> and checks if there exists any event handlers on it. If it finds any it fires that too.
4. Then it moves on and finds <div></div> tag as the next direct parent. It does the same song and dance again. It checks if there exists any event handlers on it. If it finds one it will fire it.

Event Capturing

With event capturing when we click on a button or any element from the top of the DOM tree the event will start propagating down to the exact element on which we clicked. In that process it invokes the event listeners associated to the element which leads us to the element on which the event originated.

If you check the above example, when user clicks on the name Krishna Teja ...

1. Event propagation starts from the body of the DOM tree. It checks if there exists any event on the <div></div> tag. If there are any it gets fired.
2. Then execution moves to tag <span></span> and checks if there exists any event handlers on it. If it finds any it fires that too.
3. Then it moves on and finds <p></p> tag. It checks if there exists any event handlers on it. If it finds one it will fire it.

Now that we have a fair understanding of what's event bubbling and event capturing we need to look at how events in LWC work.

In LWC we will only be implementing event bubbling and there's no event capturing, rather, we have something called event composed.