我應該使用哪個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各自都有其用途，但它們不可互換。