event.value 和 event.target.value 之间的区别

Question

在JavaScript事件处理程序中，event和event.target有什么区别？什么时候使用它们？

这里有两个例子：(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
}

我也尝试了 addEventListener()，它给出了与第一次测试相同的结果。我找不到除 this 以外的任何文档，它没有为我阐明它。

是否有推荐的事件处理方式？我的例子之一是否被认为是“不良做法”？如果两者都正确，是否有经验法则/方法来记住使用哪一个？

Answer 1

使用内联 HTML on{Event} 属性时，事件的传递方式不同。参见 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.

您可以将此视为您的代码在已经可以访问事件对象的函数中执行。

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

您可以更改 handleSelect 逻辑以使用 event 对象而不是传入的参数（在本例中为 DOM 元素）。

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

Answer 2

事件提供了一组可以访问的属性。使用点符号访问对象属性，例如 event.target

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

event.target.value 之所以称为链接，是因为它结合了两个属性。它基本上检索调用它的任何输入的值

查看更多DOM API

event.value 和 event.target.value 之间的区别

Difference between event.value and event.target.value

javascript

event-handling

dom-events