using event.target vs selecting the element

Question

Is there a difference between working a property of an element through the event.target vs working it directly?

I don't understand if there's any difference.

const btn = document.querySelector('#btn');

btn.addEventListener('click', function(e) {

  console.log(e.target.value);
  //vs
  console.log(btn.value);
}

Is there a better practice when doing this?

Answer 1

Yes, there is an important difference. The event.target property tells you what element was involved with the creation of the event. For a "click", it's the element that was under the cursor when the "click" happened.

Thus if your HTML looked like:

<button><span>Text</span><img src="something.jpg"></button>

a click on the button content would trigger the event from either the <span> or the <img>, and one of those elements would be the target.

There's another event property, event.currentTarget, that is always a reference to the element to which the event handler is attached. That's probably what you want. Alternatively, if you bind handlers with .addEventListener(), then the value of this when the handler is invoked will be a reference to the same thing as currentTarget.

Answer 2

In your case you're selecting an element by ID. Your reference is the same as the target so there is no difference. A lot of time we use delegation so you might not have reference to the clicked element. Hence we use target from the event object.

Worth also to check target vs currentTarget