Прослушиватель событий в HTML и addEventListener

#javascript #html #dom-events #addeventlistener

Вопрос:

Я хочу добавить прослушиватель событий в HTML-элемент, который заменяет поведение по умолчанию пользовательским поведением. Я знаю два разных способа добавления прослушивателей событий: (1) используйте функцию JavaScript addEventListener для добавления события в элемент DOM:

 lt;form class="my-form"gt;  lt;input type="submit"/gt; lt;/formgt; lt;scriptgt;  document.querySelectorAll(".my-form").forEach(form =gt; {  form.addEventListener("submit", doSomething);  });  function doSomething(e) {  e.preventDefault();  console.log("Data received");  } lt;/scriptgt;

(2) используйте атрибуты HTML on* :

 lt;form onsubmit="doSomething()"gt;  lt;input type="submit"/gt; lt;/formgt; lt;scriptgt;  function doSomething(e) {  e.preventDefault();  console.log("Data received");  } lt;/scriptgt;

Однако первый делает то, что должен, а второй-нет. Второй код по — прежнему использует обработчик отправки по умолчанию. Итак, мне интересно, может ли поведение первого примера быть достигнуто с помощью атрибутов HTML. И кроме того, я хотел бы знать, какой способ добавления обработчиков событий обычно предпочтительнее.

Ответ №1:

Используйте первую версию, но не используйте querySelectorAll, если у вас только одна форма. Если у вас есть только одна форма, дайте ей идентификатор и вместо этого используйте document.getElementById.

Если у вас их много, я бы делегировал:

 lt;div id="formContainer"gt;  lt;form class="my-form"gt;  lt;input type="submit"/gt;  lt;/formgt;  lt;form class="my-form"gt;  lt;input type="submit"/gt;  lt;/formgt; lt;/divgt; lt;scriptgt;  document.getElementById("formContainer").addEventListener("submit", function(e) {  e.preventDefault();  console.log("Data received");  });  lt;/scriptgt;

Чтобы сделать второе, мы делали это в предыдущем тысячелетии

 lt;form onsubmit="return doSomething()"gt;  lt;input type="submit"/gt; lt;/formgt; lt;scriptgt;  function doSomething() {  console.log("Data received");  return false  } lt;/scriptgt;

но это не рекомендуется

1. Спасибо за ваш ответ. Некоторое время назад, я думаю, я читал, что следует предпочесть использование селекторов CSS вместо идентификаторов. Помимо, вероятно, преимуществ в производительности, есть ли document.getElementById что-то еще, что можно предложить?

2. В этом больше смысла. Это говорит нам, что у вас есть ОДИН конкретный элемент на странице. Если вы используете forEach в запросе, он будет работать с одним или несколькими элементами, но я также ОЖИДАЛ БЫ, что несколько элементов будут прочитаны. И да, быстрее использовать getElementById

Ответ №2:

Во втором случае вы звоните doSomething() без аргументов, так e и будет undefined . Вам нужно явно передать событие в качестве аргумента:

 lt;form onsubmit="doSomething(event)"gt;