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

Here are two examples: (fiddle: <https://jsfiddle.net/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](https://developer.mozilla.org/en-US/docs/Web/API/Event/target), which does not clarify it for me.

Is there a recommended 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?