Далее на странице...
- Метод addEventListener - Синтаксис Правильный способ назначения обработчика событий Название события --> Обработчик события
- Метод addEventListener - Несколько событий
- Событие mouseenter Указатель появляется над элементом
В прошлой статье были рассмотрены устаревшие и не всегда удобные способы назначения обработчика для событий.
Здесь речь пойдет о том, как правильно назначать обработчики событий?
Рассмотрим, как работает метод addEventListener и как может использоваться объект события Event.
Метод addEventListener - Синтаксис
При использовании метода addEventListener синтаксис назначения обработчика для события таков:
.addEventListener(event, handler);
- элемент, для которого назначается обработчик события;
event - название события, например, "click".
handler - обработчик события.
Не стоит путать название события, например, "click" и обработчик для этого события "onClick" (см. список событий Javascript).
Для примеров используется тестовая страница из прошлой статьи.
HTML-код исходной страницы
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>JavaScript</title>
<link rel="stylesheet" href="css.css">
</head>
<body>
<button id="btn">Нажми меня</button>
<button >Нажми меня</button>
<button>Нажми меня</button>
<a href="https://www.youtube.com/">https://www.youtube.com/</a>
<script src="script.js"></script>
</body>
</html>
JavaScript-код
'use strict';
// Получаем доступ к первой кнопке
const btn = document.querySelector('button');
btn.addEventListener('click', () => {
alert('Click - addEventListener');
});
Результат в Браузере
Здесь в качестве обработчика события используется callback-функция, которая выполняется строго после события - в данном случае после того, как будет совершен клик.
Метод addEventListener - Несколько событий
Метод addEventListener (в отличии от варианта с использованием свойства onClick) позволяет назначить для одного элемента несколько событий.
JavaScript-код
'use strict';
// Получаем доступ к первой кнопке
const btn = document.querySelector('button');
btn.addEventListener('click', () => {
alert('Click');
});
// Второе событие
btn.addEventListener('click', () => {
alert('Click - Second');
});
Результат в Браузере
Второе событие происходит после первого: после того, как будет нажата кнопка ОК в окне, вызванном методом alert.
Событие mouseenter
Для практики посмотрим, как работает метод addEventListener с другим событием, например, mouseenter.
mouseenter - событие происходит, когда указатель появляется над элементом.
JavaScript-код
'use strict';
// Получаем доступ к первой кнопке
const btn = document.querySelector('button');
btn.addEventListener('mouseenter', () => {
console.log('Hover The Cursor');
});
Результат в Браузере
Каждый раз, когда указатель появляется над элементом - в консоли выводится текст Hover The Cursor.
