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

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

javascript

Javascript 我应该使用哪个Event.target属性？,javascript,naming-conventions,Javascript,Naming Conventions,查找事件起源于哪个元素时，是否存在最有效的event.target属性以这段代码为例： document.addEventListener("keypress", function (event) { if (event.target.className == "input-field") callFunctionName(); }, false); 无论if语句是否包含event.target.nodeName==“INPUT”，event.target.dat

查找事件起源于哪个元素时，是否存在最有效的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”

等，这段代码都可以工作

是否有任何理由认为这些属性中的一个比其他属性更重要，或者为什么其中一个比其他属性更糟糕？

根据您的情况，没有有效的答案

例如：

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

如果要处理输入类型文本，请使用

e.target.type

如果您想处理输入，而不是选择或输入，但具有相同的公共类，则将使用className

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

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

例如：

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

如果要处理输入类型文本，请使用

e.target.type

如果您想处理输入，而不是选择或输入，但具有相同的公共类，则将使用className

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

了解触发事件的元素的最标准、最可靠的方法是使用。您选择从该对象访问的属性实际上取决于您对该对象的哪个方面感兴趣

始终返回包含HTML元素名称（标记名，而不是元素的

name

属性或其

id

）的all caps字符串

console.log（document.getElementById（“test1”）.nodeName）；//挑选
console.log（document.getElementById（“test2”）.nodeName）；//选项
console.log（document.getElementById（“test3”）.nodeName）；//选项


选择1
选择2

了解触发事件的元素的最标准、最可靠的方法是使用。您选择从该对象访问的属性实际上取决于您对该对象的哪个方面感兴趣

始终返回包含HTML元素名称（标记名，而不是元素的

name

属性或其

id

）的all caps字符串

console.log（document.getElementById（“test1”）.nodeName）；//挑选
console.log（document.getElementById（“test2”）.nodeName）；//选项
console.log（document.getElementById（“test3”）.nodeName）；//选项


选择1
选择2

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

event.target.className==“输入字段”

不是特别灵活-仅当元素具有该类，

输入字段

，且仅该类时，这才有效。如果以后，您发现您想要向该元素添加另一个类，用于样式或其他什么呢？然后，上述测试将失败，您必须返回并修复它

无论if语句是否包含

event.target.nodeName==“INPUT”

这将匹配页面上的任何

输入

字段，这可能是不需要的-如果您稍后添加的其他HTML碰巧包含您不想触发此处理程序的

，该怎么办？然后，你必须回来解决这个问题

event.target.dataset.field==“输入”

这将导致对具有

data field=“input”

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

在定位元素时，尽可能具体通常是一个好主意。您可以使用

元素.prototype.matches

-向其传递选择器字符串（选择器字符串非常灵活），它将返回一个布尔值，指示选择器字符串是否与元素匹配：

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

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

event.target.className==“输入字段”