Разница незначительна, но ее необходимо знать.

Что такое События?

Важный способ заставить ваш сайт действительно «делать что-то».

MDN определяет Событие как:

“The Event interface represents an event which takes place in the DOM.” («Интерфейс Event представляет собой событие, происходящее в DOM».)

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

Например, если пользователь нажимает кнопку на веб-странице, вы можете отреагировать на это действие, отобразив информационное окно.

В этой статье я расскажу о двух способах обработки событий и о том, какой метод следует использовать в зависимости от вашей ситуации.

Два способа обработки событий JavaScript

На сегодняшний день существует два способа обработки событий в JavaScript:

1. С помощью обработчика событий Event Handler
2. Добавляя Event listener

Итак, на что они похожи?

Способ 1 — обработчик событий (Event Handler)

Обработчик событий может быть распознан JavaScript с помощью свойства объекта EventHandler.

Звучит немного сложно, но вы, вероятно, уже видели это раньше.

Это может выглядеть примерно так:

const button = document.querySelector(".btn")

button.onclick = function() {
  console.log("Hello!");
}
// OR
button.onclick = () => {
  console.log("Hello!");
};

В этом примере используется свойство обработчика события onclick, поэтому, когда пользователь нажимает эту кнопку, выводится «Hello!» к консоли.

Свойство обработчика событий onclick — это лишь одно из МНОЖЕСТВА обработчиков событий, которые можно использовать. Полный список можно найти на MDN.

Метод 2 — Event Listener

Другой способ использования событий в JavaScript — добавление event listener к объекту.

Добавляя event listener к объекту, мы можем перехватывать широкий спектр событий, инициированных пользователем или браузером.

Вы также можете быть знакомы с этим. Они могут выглядеть примерно так:

const button = document.querySelector(".btn")

button.addEventListener("click", function(event) {
  console.log("Hello!");
})

// OR

button.addEventListener("click", event => {
  console.log("Hello!");
})

Приведенный выше код показывает нам тот же пример, что и с обработчиком событий, регистрирующим «Hello!» в консоли, когда пользователь нажимает кнопку.

На этот раз вместо использования свойства «onclick» мы добавляем Listener (прослушиватель) событий, который будет срабатывать при событии «клика», после чего выводится «Hello!».

Существует также МНОЖЕСТВО событий, которые можно прослушивать с помощью Listener событий. Вот полный список всех событий.

Какая разница?

Между этими двумя методами обработки событий есть тонкое, но важное различие.

Если вы будете использовать первый метод, обработчики событий, разница будет заключаться в том, что если вы добавите два обработчика событий для одного и того же нажатия кнопки, но второй обработчик события перезапишет первый, и сработает только это событие.

Что подводит нас к основному выводу:

Для одного элемента у вас может быть только один обработчик событий для каждого типа события, но у вас может быть несколько Listener событий.
Это ключевое отличие. Так на что это похоже?

const button = document.querySelector(".btn")

button.onclick = () => {
  console.log("Hello!");
};

button.onclick = () => {
  console.log("How are you?");
};

// This wil log "How are you?" to the console.

В приведенном выше примере обработчик события onclick описывается дважды.

Но, первый будет перезаписан, и когда пользователь нажмет кнопку, выводится только «How are you?» в консоли.

Так что же происходит, когда мы используем «addEventListener»?

const button = document.querySelector(".btn")

button.addEventListener("click", event => {
  console.log("Hello!");
})

button.addEventListener("click", event => {
  console.log("How are you?");
})

// This wil log 
// "Hello!"
// "How are you?"
// to the console

В приведенном выше примере мы добавляем к кнопке несколько прослушивателей событий.

Когда пользователь кликнет по нему, будут запущены обе функции и отображено «Hello! How are you?” в консоли.

Какой из них вы должны использовать?

Какой метод вы должны использовать, будет полностью зависеть от вашего варианта использования.

Вам нужно прикрепить более одного события к элементу? Будете ли вы в будущем менять код? Скорее всего, вы будете.

Вот почему обычно рекомендуется использовать addEventListener.

Итак, что мы узнали?

1. Существует два метода обработки событий: использование свойства обработчика событий или добавление прослушивателя событий.
2. Для одного элемента у вас может быть только один обработчик событий для каждого типа события, но у вас может быть несколько прослушивателей событий.
3. Как правило, рекомендуется использовать прослушиватели событий.

Спасибо за чтение! Надеюсь, вы сегодня узнали что-то новое.

Перевод: What’s the difference between Event Handlers & addEventListener in JS?