In JavaScript event handlers, what is the difference between event and event.target? When to use them?

Here are two examples: (fiddle: /)

HTML:

<select id="test1">
    <option value="a">a</option>
    <option value="b">b</option>
</select>

<select id="test2" onchange="handleSelect(this)">
    <option value="c">c</option>
    <option value="d">d</option>
</select>

JS:

document.getElementById("test1").onchange = (e) => {
  console.log(e.value); // undefined
  console.log(e.target.value); // works
}

let handleSelect = (e) => {
  console.log(e.value); // works
  console.log(e.target.value); // Error: e.target is undefined
}

I also tried addEventListener(), which gives the same results as the first test. I could not find any documentation except this, which does not clarify it for me.

Is there a remended way to handle events? Is one of my examples considered "bad practice"? If both are correct, is there a rule of thumb / way to remember which one to use?

In JavaScript event handlers, what is the difference between event and event.target? When to use them?

Here are two examples: (fiddle: https://jsfiddle/nszp342t/)

HTML:

<select id="test1">
    <option value="a">a</option>
    <option value="b">b</option>
</select>

<select id="test2" onchange="handleSelect(this)">
    <option value="c">c</option>
    <option value="d">d</option>
</select>

JS:

document.getElementById("test1").onchange = (e) => {
  console.log(e.value); // undefined
  console.log(e.target.value); // works
}

let handleSelect = (e) => {
  console.log(e.value); // works
  console.log(e.target.value); // Error: e.target is undefined
}

I also tried addEventListener(), which gives the same results as the first test. I could not find any documentation except this, which does not clarify it for me.

Is there a remended way to handle events? Is one of my examples considered "bad practice"? If both are correct, is there a rule of thumb / way to remember which one to use?

• javascript
• event-handling
• dom-events

Share Improve this question Follow asked Nov 3, 2020 at 23:56 wololoowololoo 17511 gold badge22 silver badges1111 bronze badges 3

• I'd start using jQuery rather than just Vanilla JS. Just saying. Looking into more of your question – berkobienb Commented Nov 4, 2020 at 0:10
• 3 event handlers are passed an Event object when called, you set the handler to be passed this which in that place represents the element causing the event. – Patrick Evans Commented Nov 4, 2020 at 0:11
• @PatrickEvans thank you! So, is it impossible to pass the Event in the second case? I tried onchange="handleSelect()" and now e is undefined. Also you could post this as an answer. – wololoo Commented Nov 4, 2020 at 0:26

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 2

Events are passed differently when using the inline HTML on{Event} attribute. See MDN Docs here.

When the event handler is specified as an HTML attribute, the specified code is wrapped into a function with the following parameters:

• event — for all event handlers except onerror.

You can think of this as your code being executed within a function that already has access to the event object.

function (event) {
    handleSelect(this) // this is your script that's executing where 'this' is the DOM elem
}

You can change the handleSelect logic to use the event object instead of the passed in parameter (which in this case is the DOM element).

let handleSelect = (e) => { // e === this
    console.log(event.target.value) // event !== this 
}

event provides a set of properties that can be accessed. The object properties are accessed by using a dot notation for instance event.target

var dog = {
   legs: 4,
   name: 'doggie'
}
console.log(dog.name) // -> doggie

event.target.value is called chaining because it bines two properties. It basically retrieves value of whatever input it was called on

See more DOM API