currentTarget vs. target

#javascript #beginners #functional #codenewbie

One of the things I have learned recently is the difference between currentTarget and target. I learned this by experimentation, so there is probably a better and more explicit explanation out there. But with my newbie knowledge, I am going to explain the difference of these two based on what I learned. On a side note, I have not looked up any information pertaining to this topic. This is solely based on what I found out through my trial and error.

As I was working on a project I ran into a certain snag. Although I ran into a couple of snags along the way, the most significant one for me was the one concerning currentTarget. Clicking one of the buttons activated two click event functions. One for the button itself, the other for the whole object that the button was a part of. I couldn’t figure out what was the problem at first, but then I realized I had used currentTarget instead of target to identify the event target for the click events. Overall its not much of an issue, but since I had two click events that were stacked and part of the same element, it became a problem.

currentTarget was not something I had used previously. I used it because it seamed to simplified identifying the whole object that was being clicked on, rather that trying to find the right parentNode. currentTarget runs more off of the element that the event listener is placed on, whereas target is the element on the DOM that is directly being clicked on. Essentially, target identifies the specific element or tag being clicked on, and currentTarget identifies the general item being clicked on.

Since I had div tags upon div tags in each card or object, I decided to try using currentTarget instead. I wanted the click function to work on the whole card, rather than its individual contents or having to stack several parentNodes. It all worked smoothly until I complicated matters with adding the button inside the card with its own event listener. The button tag as well as its event listener were both inside of the card itself, so the event listener on the whole card would run both, if the button inside was clicked. Moving the button’s event listener outside of the card might have fixed it, but I decided for a more fool-proof method. I decided to add an if statement on my function that would run only if the target of the click was the card, or had the class of “card” to be more specific. I had the if statement use target, but still used currentTarget on the function being called inside. This made the event handler still function the same way as before the addition of the button, but clarified the target of the click.

I ended up adapting this clarification statement to all of my event handlers for this project, to ensure the function I wanted to happen would only work on the corelating targets. I had a class of "checkbox" or my button, and a class of "card" on the whole card itself. I used the contains within the if statement, for the clarification of the click target. The event handler for the card click turned out to look like this:

function handleClick(e) {
  let id = e.currentTarget.querySelector(".checkbox").id
  if(e.target.parentNode.classList.contains("card")) { // checks if click target is card not checkbox
    getDetail(id)
  }
}