我应该使用哪个 Event.target 属性？

Question

在查找事件源自哪个元素时，是否有 event.target 属性最有效？

以这段代码为例：

document.addEventListener("keypress", function (event) {

    if (event.target.className == "input-field")
        callFunctionName();

}, false);

无论 if 语句是否包含 event.target.nodeName == "INPUT"、event.target.dataset.field == "input" 等，这段代码都有效

有什么理由应该使用这些属性之一而不是其他属性，或者为什么一个属性比其他属性差？

Answer 1

没有有效的答案，取决于你的情况。

例如：

如果您只想对一个目标进行操作，您将使用 ID。

如果您想使用输入类型的文本，您将使用 e.target.type

如果您想使用输入而不是选择或输入但具有相同的 class 共同点，您将使用 className..

想想你想要什么，这就是正确答案！

Answer 2

了解触发事件的元素的最标准和可靠的方法是 `event.target`。

您选择从该对象访问什么属性(ies) 实际上取决于您对该对象的哪个方面感兴趣。

nodeName 总是 returns 包含 HTML 元素名称的全部大写字符串（标签名称，而不是元素的 name 属性或其 id).

console.log(document.getElementById("test1").nodeName); // SELECT
console.log(document.getElementById("test2").nodeName); // OPTION
console.log(document.getElementById("test3").nodeName); // OPTION

<select id="test1">
  <option id="test2">Choice 1</option>
  <option id="test3">Choice 2</option>  
</select>

dataset is used for a completely different reason. It returns a data attribute value for the data attribute 在 .dataset 之后指定。这个 API 与 event.target.nodeName 相比较的唯一方法是如果你有一个类似于这样的元素：

<input type="text" data-field="input">

这不太可能。下面是如何在 JavaScript.

中检索 HTML 元素中的 data-* 属性值的示例

console.log(document.getElementById("test1").dataset.policyType); // Home

<div id="test1" data-policy-type="Homeowners">Policy Number: 1234546</div>

这两个 API 各有其用途，但不可互换。

Answer 3

这取决于您需要的具体程度。特别是，您当前的：

event.target.className == "input-field"

不是特别灵活 - 这仅在元素具有 、class、input-field 和 class 时才有效。如果稍后您发现要向该元素添加 another class 以用于样式化或其他用途怎么办？那么，上面的测试就会失败，你就得回去修复了。

This same piece of code works whether the if statement contains event.target.nodeName == "INPUT"

这将匹配页面上的 any input 字段，这可能是不可取的 - 如果您稍后添加的其他 HTML 恰好包含一个<input> 您不想触发此处理程序？然后，你必须回来解决这个问题。

event.target.dataset.field == "input"

这将导致针对任何具有 data-field="input" 的元素触发处理程序。虽然可能不太可能，但如果稍后将这样的元素添加到 HTML 中，您不希望此侦听器连接到该元素怎么办？然后，再一次，你必须回来修复它。

在定位元素时尽可能具体通常是个好主意。您可以使用 Element.prototype.matches 执行此操作 - 将选择器字符串传递给它（选择器字符串非常灵活），它将 return 一个布尔值，指示选择器字符串是否与元素匹配：

if (event.target.matches('input.input-field[data-field="input"]')) {
  callFunctionName();
}

我应该使用哪个 Event.target 属性？

Which Event.target Property Should I Use?

javascript

naming-conventions

了解触发事件的元素的最标准和可靠的方法是 `event.target`。

我应该使用哪个 Event.target 属性？

Which Event.target Property Should I Use?

javascript

naming-conventions

了解触发事件的元素的最标准和可靠的方法是 event.target。

了解触发事件的元素的最标准和可靠的方法是 `event.target`。