Что такое События?
Важный способ заставить ваш сайт действительно «делать что-то».
MDN определяет Событие как:
“The Event
interface represents an event which takes place in the DOM.” («Интерфейс Event представляет собой событие, происходящее в DOM».)
События — это действия или события, происходящие в системе, которую вы программируете, о которых система сообщает вам, чтобы вы могли при желании реагировать на них каким-либо образом.
Например, если пользователь нажимает кнопку на веб-странице, вы можете отреагировать на это действие, отобразив информационное окно.
В этой статье я расскажу о двух способах обработки событий и о том, какой метод следует использовать в зависимости от вашей ситуации.
На сегодняшний день существует два способа обработки событий в JavaScript:
Итак, на что они похожи?
Обработчик событий может быть распознан JavaScript с помощью свойства объекта EventHandler.
Звучит немного сложно, но вы, вероятно, уже видели это раньше.
Это может выглядеть примерно так:
const button = document.querySelector(".btn") button.onclick = function() { console.log("Hello!"); } // OR button.onclick = () => { console.log("Hello!"); };
В этом примере используется свойство обработчика события onclick, поэтому, когда пользователь нажимает эту кнопку, выводится «Hello!» к консоли.
Свойство обработчика событий onclick — это лишь одно из МНОЖЕСТВА обработчиков событий, которые можно использовать. Полный список можно найти на MDN.
Другой способ использования событий в 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?» в консоли.
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.
Спасибо за чтение! Надеюсь, вы сегодня узнали что-то новое.
Краткий перевод: https://vuejs.org/guide/components/v-model.html Основное использование v-model используется для реализации двусторонней привязки в компоненте. Начиная с Vue…
Сегодня мы рады объявить о выпуске Vue 3.4 «🏀 Slam Dunk»! Этот выпуск включает в…
Vue.js — это универсальный и адаптируемый фреймворк. Благодаря своей отличительной архитектуре и системе реактивности Vue…
Недавно, у меня истек сертификат и пришлось заказывать новый и затем устанавливать на хостинг с…
Каким бы ни было ваше мнение о JavaScript, но всем известно, что работа с датами…
Все, кто следит за последними событиями в мире адаптивного дизайна, согласятся, что введение контейнерных запросов…