Один обработчик для нескольких элементов JavaScript – Отмена стандартного поведения браузера - Метод preventDefault - Третий аргумент метода addEventListener

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

Отмена стандартного поведения браузера

Один обработчик для нескольких элементов

Третий аргумент метода addEventListener

Как в JavaScript отменить стандартное поведение в браузере.

Примеры стандартных поведений в браузере:

- если кликнуть по ссылке, то будет осуществлен переход по URL-адресу, который указан в атрибуте href тега a;

- если нажать на кнопку, у которой для атрибута type указано значение submit, то данные из формы будут отправлены на сервер;

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

В JavaScript есть возможность отменять стандартное поведение браузера.

Отмена стандартного поведения браузера

Для отмены стандартного поведения браузера используется метод preventDefault(), который есть у объекта-события Event.

Для работы будет использоваться тестовая html-страница.

Пример №1

HTML-код

<html lang="ru">
  <head>
		<meta charset="utf-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<title>Объект Event</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 link = document.querySelector('a');

// Назначаем для ссылки событие и обработчик
link.addEventListener('click', (event) => {
    event.preventDefault(); // Отменяем стандартное поведение

    // Назначаем иное поведение
    console.log(event.target);
});

Результат в Браузере

Отменяем стандартное поведение

Комментарии к примеру.

Сначала получаем доступ к ссылке - к тегу a. Напомним, что метод querySelector возвращает первый элемент. Но так как у нас одна ссылка, поэтому смело его используем.
Используя метод addEventListener назначаем для ссылки событие click (это одинарный щелчок) и обработчик события - это функция (в данном случае стрелочная), в качестве параметра которой указывается объект события event.
Далее, чтобы отменить стандартное поведение используем метод preventDefault() объекта Event (в данном случае это будет говорить о том, что при клике по ссылке переход по ней не будет осуществлен).
Назначаем иное поведение. И теперь, при каждом клике по ссылке выводится соответствующая информация в консоль.

Итак, метод preventDefault() объекта Event позволяет отменить стандартное поведение браузера. Этот прием часто используется на практике.

Один обработчик для нескольких элементов

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

Как отменить стандартное поведение браузера для нескольких элементов?

Или, другими словами, стоит задача: назначить один обработчик для нескольких элементов страницы.

Вернемся к html-коду из примера №1 и назначим один обработчик для всех кнопок - для группы тегов button.

Пример №2

JavaScript-код

'use strict';

// Доступ ко всем кнопкам
const btns = document.querySelectorAll('button');

// Перебираем все элементы массива - все кнопки: это аргумент стрелочной функции btn (item)
// И назначаем для события click для каждой из кнопок один обработчик
btns.forEach(btn => {
    btn.addEventListener('click', (event) => {
        console.log(event.target);
    })
});

Результат в Браузере

Один обработчик для нескольких элементов

Комментарии к примеру.

Сначала получаем доступ ко всем кнопкам. Для этого используется метод querySelectorAll.
Стоит отметить, что к переменной btns не применим метод addEventListener (как мы делали в примере выше с переменной link).
Так как переменная btns содержит псевдомассив (из всех кнопок), который возвращает метод querySelectorAll.
То есть мы можем назначить один обработчик событий для всех кнопок/для каждой из кнопок только методом их перебора (перебирая все элементы псевдомассива). Для этого существует метод forEach.
Теперь, при клике по любой из кнопок в консоль выводится соответствующая информация.

Здесь мы разобрали, как работает метод preventDefault() и как происходит отмена стандартного поведения браузера.

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

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

Третий аргумент метода addEventListener

У метода addEventListener может быть третий аргумент (необязательный). Это можно увидеть, если обратиться к официальной документации.

Рассмотрим еще раз синтаксис метода addEventListener (ранее рассматривался синтаксис с двумя аргументами, так как именно сейчас в рамках этой статьи мы увидим, как может использоваться третий аргумент метода addEventListener).

target.addEventListener(type, listener[, options]);

Что передается в метод addEventListener?

type - тип события;

listener - обработчик события;

options - есть возможность добавления опций.

Итак, согласно официальной документации у метода addEventListener в качестве третьего аргумента могут использоваться некоторые опции. Рассмотрим одну из них - это свойство once.

Свойство once принимает одно из булевых значений и при значении true указывает, что обработчик может быть вызван не более одного раза.

Продолжим работать с примером №2: оптимизируем его код -> вынесем обработчик в отдельную функцию и, используя в качестве третьего аргумента метода addEventListener свойство once, сделаем так, чтобы для каждой из кнопок обработчик срабатывал только один раз.

Пример №3

JavaScript-код

'use strict';

// Доступ ко всем кнопкам
const btns = document.querySelectorAll('button');

// Обработчик для вывода информации в консоль
const outputConsole = (event) => {
    console.log(event.target);
}

// Для каждой из кнопок назначаем обработчик, который срабатывает один раз
btns.forEach(btn => {
    btn.addEventListener('click', outputConsole, {once: true})
});

Результат в Браузере

Третий аргумент addEventListener - Свойство once