JavaScript | На каком HTML-элементе был клик?

Как получить объект HTML-элемента по которому был совершён клик в документе?

Идея в том, что мы не знаем на какой HTML-элемент может нажать пользователь. Представьте, что у вас на странице есть элементы пагинации — кнопки с цифрами. Вы хотите отловить ту самую кнопку по которой кликнул пользователь, чтобы отрисовать ему нужное содержимое. Индекс кнопки будет участвовать в алгоритме отображения. Как быть?

Решение

document.addEventListener("click", event => console.log(event.target))

Мы повесили слушатель события на весь документ. То есть метод addEventListener() был вызван у объекта document. Это максимально расширяет наши возможности в отлове любого элемента из HTML-разметки. Первым параметром мы указали тип события, который мы хотим отловить(услышать) — это «click«. Вторым параметром мы передали функцию-обработчик, которая выполнится только при совершении события клика на документе. Это функция обратного вызова т. е. callback. Функция-обработчик сработает только в момент свершения события. Мы просто её передали, а не вызвали. Для простоты восприятия функция оформлена в виде стрелочной.

В этом решении мы просто выводим в консоль цель события (нужный нам «кликнутый» элемент), но мы уже можем начать взаимодействие с элементом без вывода в консоль.

 

Пример простейшего взаимодействия с «кликнутым» элементом

Например мы можем менять внутреннее содержимое «кликнутого» элемента, если оно есть.

document.addEventListener("click", event => event.target.innerText = "Текст")
или
document.addEventListener("click", event => event.target.innerText = [...event.target.innerText].reverse().join(""))

Откройте любую страницу любого сайта. Введите в консоль эту команду и покликайте на текстовые элементы страницы (не ссылки). Будет весело!

 

Информационные ссылки

JavaScript | Метод addEventListener()

Стандарт объектной модели документа — DOM

DOM | Интерфейс EventTarget

Официальная страница стандарта DOM — https://dom.spec.whatwg.org

 

Поделись записью