Метода аддЕвентЛистенер () - Пример примера обрађивача ЈаваСцрипт догађаја

Метода ЈаваСцрипт аддЕвентЛистенер () вам омогућава да подесите функције које ће се позивати када се догоди одређени догађај, на пример када корисник кликне на дугме. Ово упутство вам показује како можете да примените аддЕвентЛистенер () у свој код.

Разумевање догађаја и организатора догађаја

Догађаји су радње које се дешавају када корисник или прегледач манипулише страницом. Они играју важну улогу јер могу проузроковати динамичке промене елемената веб странице.

На пример, када прегледач заврши учитавање документа, тада се loadдогодио догађај. Ако корисник кликне дугме на страници, тада clickсе догодио догађај.

Многи догађаји могу се догодити једном, више пута или никада. Такође можда не знате када ће се догађај догодити, посебно ако је генерисан од корисника.

У овим сценаријима потребан вам је управљач догађајима да би открио када се догађај догоди. На овај начин можете поставити код да реагује на догађаје у тренутку када се они одвијају у ходу.

ЈаваСцрипт пружа обрађивач догађаја у облику addEventListener()методе. Овај руковалац може бити повезан са одређеним ХТМЛ елементом за који желите да надгледате догађаје, а елемент може да има и више приказивача.

синтакса аддЕвентЛистенер ()

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

target.addEventListener(event, function, useCapture) 
  • таргет : ХТМЛ елемент у који желите да додате свој руковатељ догађајима. Овај елемент постоји као део објектног модела документа (ДОМ) и можда ћете желети да научите како да изаберете ДОМ елемент.
  • догађај : низ који наводи име догађаја. Већ смо поменули loadи clickдогађаје. За знатижељнике, ево комплетне листе ХТМЛ ДОМ догађаја.
  • функција : одређује функцију која ће се покретати када се детектује догађај. Ово је магија која може да дозволи да се ваше веб странице динамички мењају.
  • усеЦаптуре : опционална логичка вредност (тачно или нетачно) која одређује да ли догађај треба извршити у фази хватања или мехурића. У случају угнежђених ХТМЛ елемената (као што је imgунутар а div) са приложеним обрађивачима догађаја, ова вредност одређује који ће се догађај прво извршити. По дефаулту је постављено на фалсе, што значи да се прво извршава унутрашњи обрађивач ХТМЛ догађаја (фаза бубблинга).

Пример кода аддЕвентЛистенер ()

Ово је једноставан пример који сам вам показао addEventListener()на делу.

Када корисник кликне на дугме, приказује се порука. Још један клик на дугме скрива поруку. Ево релевантног ЈаваСцрипт-а:

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

Пратећи синтаксу приказану за addEventListener():

  • циљ : ХТМЛ елемент саid='button'
  • функција : анонимна (стрелица) функција која поставља код неопходан за откривање / сакривање поруке
  • усеЦаптуре : препуштено подразумеваној вредности одfalse

Моја функција је у стању да открије / сакрије поруку додавањем / уклањањем ЦСС класе која се зове „откриј“ која мења видљивост елемента поруке.

Наравно, у свом коду, слободно прилагодите ову функцију. Анонимну функцију такође можете заменити сопственом именованом функцијом.

Доношење догађаја као параметра

Понекад ћемо можда желети да знамо више информација о догађају, на пример на који је елемент кликнут. У овој ситуацији треба да проследимо параметар догађаја нашој функцији.

Овај пример показује како можете добити ИД елемента:

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

Овде је параметар догађаја променљива са именом, eали се лако може назвати било чим другим, као што је „догађај“. Овај параметар је објекат који садржи разне информације о догађају, као што је циљни ИД.

Не морате да радите ништа посебно и ЈаваСцрипт аутоматски зна шта треба учинити када параметар на овај начин пренесете у своју функцију.

Уклањање руковалаца догађајима

Ако из неког разлога више не желите да се покретач догађаја активира, ево како да га уклоните:

target.removeEventListener(event, function, useCapture); 

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

Вежбом до савршенства

Најбољи начин да се побољшате са водитељима догађаја је вежбање са сопственим кодом.

Ево примера пројекта који сам урадио у којем сам помоћу руковалаца догађајима променио боју, величину и брзину мехурића који теку преко позадине веб странице (мораћете да кликнете на централни панел да бисте открили контроле).

Забавите се и направите нешто сјајно!

За више знања о веб развоју погодним за почетнике, посетите мој блог на 1000 Миле Ворлд и пратите ме на Твиттер-у.