skip to main content

Element.addEventListener()

js

Кратко 🔗

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

Пример 🔗

let clickHandler = function (event) {
console.log("произошло событие", event.type)
}
let elem = document.querySelector("button")
elem.addEventListener("click", clickHandler)

Как это понять 🔗

Синтаксис выше означает примерно следующее: «Браузер, найди элемент button и по клику на него запускай функцию clickHandler».

При вызове функции в нее передается специальный объект (в примере выше — event), который у разных типов событий разный. Например у событий нажатия клавиши есть код клавиши, а у событий перемещения мыши — координаты.

Функция может быть объявлена ранее, а может быть и анонимной:

function handleClickFunction(e) {
alert("Именованая функция")
}
let elem = document.querySelector("button")

// Добавление функции handleClickFunction как обработчика события click
elem.addEventListener("click", handleClickFunction)

// Добавление анонимной функции как обработчика события click
elem.addEventListener("click", function (e) {
alert("Анонимная функция")
})

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

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

Как пишется 🔗

У объекта event есть специальные методы, такие как preventDefault() и stopPropagation(). Остальные методы практически не используются:

  • preventDefault позволяет заблокировать стандартное поведение браузера. Например, по клику на ссылке — заблокировать переход по этой ссылке;
  • stopPropagation позволяет остановить всплытие события по DOM дереву.

В работе 🔗

Миша 👨‍🔧

🛠 Базовая обработка событий клавиатуры:

See the Pen addEventListener - в работе by vindi-r (@vindi-r) on CodePen.

🛠 Обработка событий мыши:

See the Pen addEventListener - в работе by vindi-r (@vindi-r) on CodePen.


Автор: Миша 👨‍🔧