«Единственный способ творить великие дела – это любить то, что ты делаешь»
JavaScript



Игра «Морской Бой» на JavaScript: Простая Игра и Игра для Двоих



Далее на странице...



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

Здесь речь пойдет о том, как правильно назначать обработчики событий?

Рассмотрим, как работает метод addEventListener и как может использоваться объект события Event.



Метод addEventListener - Синтаксис

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

element.addEventListener(event, handler);

element - элемент, для которого назначается обработчик события;

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.



Читайте также...



Отзывы и комментарии:

Комментариев нет...

Оставить отзыв:

Ваше Имя:

Текст комментария:

Ответьте на вопрос:

Сколько дней в Високосном году?


Рунет - Часть 4

Тематические публикации
Популярные заметки
Последние заметки