Методът addEventListener () - Примерен код на слушателя на JavaScript

Методът addEventListener () на JavaScript ви позволява да настроите функции, които да се извикват, когато се случи определено събитие, например когато потребителят щракне върху бутон. Този урок ви показва как можете да внедрите addEventListener () във вашия код.

Разбиране на събития и обработчици на събития

Събитията са действия, които се случват, когато потребителят или браузърът манипулира страница. Те играят важна роля, тъй като могат да доведат до динамична промяна на елементи на уеб страница.

Например, когато браузърът завърши зареждането на документ, тогава се е loadслучило събитие. Ако потребител щракне върху бутон на страница, тогава се clickе случило събитие.

Много събития могат да се случат веднъж, многократно или никога. Също така може да не знаете кога ще се случи събитие, особено ако е генерирано от потребител.

В тези сценарии се нуждаете от манипулатор на събития, за да откриете кога дадено събитие се случва. По този начин можете да настроите код, който да реагира на събития, тъй като те се случват в движение.

JavaScript предоставя обработчик на събития под формата на addEventListener()метода. Този манипулатор може да бъде прикрепен към определен HTML елемент, за който искате да наблюдавате събития, и елементът може да има прикрепени повече от един манипулатор.

addEventListener () Синтаксис

Ето синтаксиса:

target.addEventListener(event, function, useCapture) 
  • target : HTML елементът, към който искате да добавите вашия манипулатор на събития. Този елемент съществува като част от обектния модел на документ (DOM) и може да пожелаете да научите как да изберете DOM елемент.
  • събитие : низ, който указва името на събитието. Вече споменахме loadи clickсъбития. За любопитните, ето пълен списък на HTML DOM събития.
  • функция : определя функцията, която да се изпълнява при откриване на събитието Това е магията, която може да позволи на вашите уеб страници да се променят динамично.
  • useCapture : незадължителна логическа стойност (true или false), която указва дали събитието трябва да се изпълни във фазата на улавяне или балонче. В случай на вложени HTML елементи (като imgвътре в a div) с прикачени манипулатори на събития, тази стойност определя кое събитие се изпълнява първо. По подразбиране е зададено на false, което означава, че първо се изпълнява най-вътрешният манипулатор на HTML събития (фаза на балончета).

addEventListener () Пример за код

Това е прост пример, който направих, който ви показва addEventListener()в действие.

Когато потребителят щракне върху бутона, се показва съобщение. Друго щракване с бутон скрива съобщението. Ето съответния JavaScript:

let button = document.querySelector('#button'); let msg = document.querySelector('#message'); button.addEventListener('click', ()=>{ msg.classList.toggle('reveal'); }) 

Следвайки синтаксиса, показан преди за addEventListener():

  • target : HTML елемент сid='button'
  • функция : анонимна (стрелка) функция, която задава код, необходим за разкриване / скриване на съобщението
  • useCapture : оставено до стойността по подразбиране наfalse

Моята функция е в състояние да разкрие / скрие съобщението чрез добавяне / премахване на CSS клас, наречен "разкриване", който променя видимостта на елемента на съобщението.

Разбира се във вашия код, не се колебайте да персонализирате тази функция. Можете също така да замените анонимната функция със собствена имена.

Предаване на събитие като параметър

Понякога може да искаме да знаем повече информация за събитието, например какъв елемент е щракнат. В тази ситуация трябва да предадем параметър за събитие на нашата функция.

Този пример показва как можете да получите идентификатора на елемента:

button.addEventListener('click', (e)=>{ console.log(e.target.id) }) 

Тук параметърът на събитието е променлива с име, eно може лесно да се нарече каквото и да било друго като "събитие". Този параметър е обект, който съдържа различна информация за събитието, като например целевия идентификатор.

Не е нужно да правите нищо специално и JavaScript автоматично знае какво да прави, когато предадете параметър по този начин на вашата функция.

Премахване на манипулатори на събития

Ако по някаква причина вече не искате да се активира манипулатор на събития, ето как да го премахнете:

target.removeEventListener(event, function, useCapture); 

Параметрите са същите като addEventListener().

Практиката прави перфектни

Най-добрият начин да се подобрите с манипулаторите на събития е да практикувате със собствен код.

Ето примерния проект, който направих, в който използвах манипулатори на събития, за да променя цвета, размера и скоростта на мехурчетата, преминаващи през фона на уеб страница (ще трябва да кликнете върху централния панел, за да разкриете контролите).

Забавлявайте се и направете нещо страхотно!

За повече познания за уеб разработка, подходящи за начинаещи, посетете моя блог на 1000 Mile World и ме последвайте в Twitter.