Intro
This blog is going to go over some helpful information about JavaScript events that you may, or may not already know. This blog was inspired by the Syntax Web Development Podcast.
Event Bubbling
Let's say you have this HTML code:
<div onclick="alert("Button Clicked")">
<p>
<button>Click Me</button>
</p>
</div>
If a user clicked the button on the HTML page, the onclick event handler would be triggered in the div element. How is this possible? Well, events bubble up, meaning that handlers are called starting from the element where the event occurred and up through each of its ancestors. If there was an onclick event listener for the button, and a user clicked the button, the button's handler would get called first and then the div element's handler.
Think of it like a bubble starting from the bottom of a cup and floating up to the top, triggering handlers on the way up.
Please ignore my horrible art skills
Event Capturing
Event capturing is the opposite of event bubbling. Using our example from above, if the button was clicked, the event would be handled by the outermost div, then the inner div, and then the button. This is also called "trickling," since the event trickles down the chain.
Both bubbling and capturing are phases of event propagation. Basically the main difference is the order in which the element's receive the event. For this reason, most people prefer event bubbling since the element they want to target is usually the one that the user will be interacting with. Event bubbling is the default propagation mode.
However, you can specify if you want the event to trigger during the capturing phase. One reason you might want to do this is that some events don't bubble up, like the play event. To use event capturing, you will set the useCapture argument to true. This is the third argument to addEventListener().
event.preventDefault()
Most programmers that have used a JavaScript framework know about this one. This method allows you to prevent the default action of an element. For example, when submitting forms the default action is to reload the page. However, with single-page applications usually you don't want this behavior and so you can use event.preventDefault() to prevent it.
Another example for when you might want to use this is if you want to prevent specific keystrokes from showing up in a text field. See the MDN docs for an example of this.
Target vs. currentTarget
target and currentTarget are properties of events. target is the element which triggered the event. For a click event, this would be the element that was clicked on. currentTarget is the current target for the event as the event traverses the DOM via capturing or bubbling. The current target is the element that the event listener is attached to.
This comes in handy for event delegation, where you can attach one event listener for a bunch of child elements. For example if you had a few buttons nested within the same div element, you can register an event listener for the div and use event.target to see which button was clicked. event.currentTarget will be your div element with all of the nested buttons inside.
Event delegation can save a lot of time because instead of adding event listeners to a bunch of elements, you only have to add it to a common ancestor.
event.isTrusted()
This method will check if the event was created by a user or is a fake event. It will return true if the event was created by a user action and it will return false if it was created by a script or dispatched.
Adding an Event Listener Once
The addEventListener() method has a parameter called once that accepts a boolean. If this parameter is set to true, then the event listener will only be invoked, at most, once. The listener will be automatically removed once invoked.
One use case for this parameter is for a load event. Since a page only loads once, you may want to automatically remove this listener after the page is loaded.
Summary
In this blog, I wrote about a few JavaScript event tidbits that you may or may not know about. What other methods or tricks regarding events do you know about?
Thank you for reading!
Top comments (0)