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

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

无论if语句是否包含event.target.nodeName == "INPUT"这段代码均有效

这将匹配页面上的任何 input字段，这可能是不希望的-如果以后添加的其他HTML恰巧包含不想触发此处理程序的<input>怎么办？ 然后，您必须返回并解决此问题。

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

这将导致为任何具有data-field="input"元素触发处理程序。 尽管可能不太可能，但是如果以后将这样的元素添加到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原因完全不同。 它为.dataset之后指定的data属性返回一个data属性值。 该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各自都有其用途，但它们不可互换。