Simple explanation of event.currentTarget, event.target and event delegation

What makes a great web page? It's not just the content of the web page or the structure of how it looks, it's also how the page is responding based on the user activity. To understand what the title of this blog is, we have to understand what makes a web page interactive.

Javascript provides something called event listeners. Its main objective is the name itself, it listens for events and when the event occurs then something happens. In other words when an event like a "click" or a "mouseover" is triggered then a specified written function is executed, this is where the addEventListener() method comes in.

addEventListener()

To add an event listener we need an element to attach the listener to. For our example we are going to attach a listener to a div that has two buttons nested inside it A.K.A children elements

//HTML
<div>
     <button id="post">Post</button>
     <button id="edit">Edit</button>
</div>

Assuming this div is the first div in our document, in our JS file we will need to grab the element from the DOM using document.querySelector().

sidenote: document.querySelector() only returns the very first element that matches the specified selector, if there are multiple divs I suggest adding a .class or an #id to the div.

     const div = document.querySelector("div")
     div.addEventListener("click", (e) => handleButton(e))

The first parameter passed is the event we are listening for, in this case the event is click, the second parameter passed is the callback function that gets invoked when the click event occurs.

sidenote: There is a third optional parameter that goes into addEventListener() method. If you would like to learn more about it, click.

We'll also define handleButton

function handleButton(e){
     if (e.target.id === "post"){
           postSomething
       }
     else if (e.target.id === "edit"){
            editSomething
        }
}

What is e? and why is it being passed? e here is a variable representing the event object that occurred. We want to pass it because it carries valuable information about what exactly happened.

Having all this set up, we can now step back and see what is going on here...

1. We attached the listener to the div element.
2. We defined what is the exact event we are listening to and what will happen when the event occurs.
3. We passed the event object (a snapshot of what exactly happened and uses the information attached along with it.)
4. We then use a property of that event object we passed, event.target.id to do something specific, in this case, either postSomething or editSomething

What is event.currentTarget?

event.currentTarget is a property of the event object which identifies the specific HTML element the event listener was attached to. In our case, the div is our event.currentTarget

What is event.target?

event.target is a property of the event object which identifies the specific HTML element on which the event occurred. In our conditional the ids are referring to the button ids, so whichever button is clicked that button is the event.target

Having these two properties gives us access to the parent element and its children elements. With this in our back pocket it provides us an easier way to manipulate the DOM however we want to.

How does event delegation fit into this?

Event delegation is a Javascript technique where an event listener is delegated to the parent HTML element instead of adding multiple of the same event listeners to its children elements.

In our example, we exercised event delegation. We can definitely do this a whole different way by grabbing both buttons from the DOM and attaching an event listener to each one of them. But what happens if you have ten buttons? or more? The code will start looking messy and you will also have ten event listeners as opposed to just one parent listener. More event listeners means more memory usage which then decreases performance.

Event delegation is also helpful when adding event listeners to elements that do not exist on the DOM after the page loads.

A simple example of this is creating an <li> based on user input and you want an event listener on each <li> The idea is by adding an event listener to its parent element <ul> or <ol> for every <li> that is on the DOM and that are yet to exist, an event listener is automatically placed over them.

CONCLUSION

event.currentTarget is where the event is attached to.
event.target is where the exact event happened.
event delegation will make for a cleaner code and better performance.

When I first started learning about event listeners I was very confused on what these three things meant. This blog barely touches the surface but hopefully this helps clear up the basics.