currentTarget vs. target
Tags: javascript, beginners, functional, codenewbie
Published: 2021-12-31 02:49:11

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 `parentNode`s. 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: 

```jsx
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)
  }
}
```