Многие из вас, будучи новичками, могли сталкиваться с этой функцией под названием «addEventListener()». Итак, что же это за птичий вызов EventListener? какова его цель? Как это облегчает нашу жизнь? и что в этом такого классного.. В этом посте мы попробуем разобраться с некоторыми ответами….

addEventListener — это функция, которая встраивает событие (читай кодовый поток) в элемент HTML-страницы, который появляется на стороне клиента. Что такое «событие»? Чтобы лучше понять, давайте разделим пополам этот термин «addEventListener».

Первое слово «добавить», которое означает добавить что-то или встроить что-то в сущность.

Следующее слово в нашей анатомии — событие. Событие с точки зрения веб-разработки означает, что все, что происходит в HTML-документе либо из-за действий клиента, либо автоматически инициируется, называется событием. Например, щелчок по какой-либо кнопке на веб-странице, или прокрутка веб-страницы, или наведение курсора на определенную область, например на панель навигации. Теперь событие на веб-странице не ограничивается только этими несколькими примерами, существует бесконечный список. событий, которые могут произойти на веб-странице, вы можете прочитать о них по этой ссылке: https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Building_blocks/Events

Последнее слово в нашем сегодняшнем уроке анатомии — «слушатель», последние слова резюмируют весь смысл «addEventListner», поэтому слушатель слушателя в основном записывает событие на веб-странице (событие) и реагирует на него, запуская действие, которое программист хочет, чтобы это произошло в этом конкретном случае. По сути, задача addEventListener() состоит в том, чтобы записать определенное событие в HTML-документе и далее запустить определенный поток кода (функцию), соответствующий этому конкретному событию.

Давайте возьмем пример: когда вы посещаете веб-страницу, при нажатии кнопки «Отправить» вы получаете предупреждающее сообщение о том, что «Успешно отправлено», так кто же стоит за этим процессом? Никаких призов за угадывание! да, это Event Listener выполняет свою работу. Нажатие кнопки отправки — это событие здесь, а получение предупреждающего сообщения — это ответ, который он дает при прослушивании этого события!

Синтаксис прослушивателя событий следующий:

элемент.addEventListener("click", myFunction);

function myFunction() {
оповещение («Привет, мир!»);
}

P.S: Это моя первая попытка написать технический блог, мне просто понравилось его записывать. Будучи новичком, я знаю, что есть много ошибок, поэтому ваш канал очень ценен

Спасибо!