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.
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
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.
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.
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.
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.
Thank you for reading!