Какое свойство 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"

Это будет соответствовать любому 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

Самый стандартный и надежный способ узнать, какой элемент вызвал событие, - 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 , указанного после .dataset. Единственный способ, которым этот API был бы сопоставим с event.target.nodeName, был бы, если бы у вас был элемент, подобный этому:

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

что маловероятно. Вот пример того, как значения атрибутов data-* в ваших элементах HTML могут быть получены в JavaScript.

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

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

Каждый из двух API служит своей цели, но они не являются взаимозаменяемыми.

Answer 3

Нет правильного ответа, зависит от вашего случая.

Например:

Если вы хотите сделать только с одной целью, вы будете использовать ID.

Если вы хотите сделать с типом ввода текста, вы будете использовать e.target.type

Если вы хотите сделать со входами, которые могут быть выбраны или введены, но имеют один и тот же общий класс, вы будете использовать className ..

Думай, что хочешь, и это будет правильный ответ!