我应该使用哪个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

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

  

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

并不是特别灵活-仅当元素具有该类，input-field和该类时才有效。如果以后发现要为该元素添加另一个类，以进行样式设计或其他操作，该怎么办？然后，上述测试将失败，您必须返回并对其进行修复。

  

无论if语句是否包含event.target.nodeName == "INPUT"

，同一段代码都有效

这将与页面上的 any input字段匹配，这很可能是不希望的-如果您稍后添加的其他HTML恰好包含了一个<input>，该怎么办？是否要触发此处理程序？然后，您必须返回并解决此问题。

  

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

这将导致使用data-field="input"为 any 元素触发处理程序。尽管可能不太可能，但是如果以后将这样的元素添加到HTML中，而又又不想将此侦听器连接到该元素，该怎么办呢？然后，再次，您必须回来修复它。

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

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

Answer 2

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

例如：

如果只想处理一个目标，则将使用ID。

如果要处理输入文字，则将使用e.target.type

如果要使用输入内容而不是选择内容或输入内容，但要具有相同的类，则可以使用className。

想想你想要的，这将是正确的答案！

Answer 3

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

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

nodeName始终返回一个全大写的字符串，其中包含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的原因完全不同。它为在data之后指定的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都有各自的用途，但不能互换。