Metóda addEventListener () - ukážkový kód poslucháča udalostí JavaScriptu

Metóda JavaScript addEventListener () umožňuje nastaviť funkcie, ktoré sa majú volať, keď dôjde k zadanej udalosti, napríklad keď používateľ klikne na tlačidlo. Tento tutoriál vám ukáže, ako môžete implementovať addEventListener () do vášho kódu.

Porozumenie udalostiam a manipulátorom udalostí

Udalosti sú akcie, ku ktorým dôjde, keď používateľ alebo prehliadač manipuluje so stránkou. Hrajú dôležitú úlohu, pretože môžu spôsobiť dynamické zmeny prvkov webovej stránky.

Napríklad keď prehliadač dokončí načítanie dokumentu, loaddošlo k udalosti. Ak používateľ klikne na tlačidlo na stránke, došlo k clickudalosti.

Mnoho udalostí sa môže stať raz, viackrát alebo nikdy. Tiež nemusíte vedieť, kedy k udalosti dôjde, najmä ak je generovaná používateľom.

V týchto scenároch potrebujete obslužnú rutinu udalosti, aby ste zistili, kedy k udalosti dôjde. Týmto spôsobom môžete nastaviť kód tak, aby reagoval na udalosti za behu.

JavaScript poskytuje obslužný program udalostí vo forme addEventListener()metódy. Tento obslužný program je možné pripojiť ku konkrétnemu prvku HTML, pre ktorý chcete sledovať udalosti, a k prvku môže byť pripojených viac ako jeden obslužný program.

Syntax addEventListener ()

Tu je syntax:

target.addEventListener(event, function, useCapture) 
  • cieľ : prvok HTML, do ktorého chcete pridať obslužnú rutinu udalosti. Tento prvok existuje ako súčasť modelu DOM (Document Object Model) a možno by ste sa chceli dozvedieť viac o tom, ako vybrať prvok DOM.
  • event : reťazec, ktorý určuje názov udalosti. Už sme spomínali loada clickudalosti. Pre zvedavých ľudí je tu kompletný zoznam udalostí HTML DOM.
  • function : špecifikuje funkciu, ktorá sa má spustiť pri detekcii udalosti. Toto je kúzlo, ktoré umožňuje vašim webovým stránkam dynamicky sa meniť.
  • useCapture : voliteľná boolovská hodnota (true alebo false), ktorá určuje, či sa má udalosť vykonať vo fáze zachytávania alebo prebublávania. V prípade vnorených prvkov HTML (napríklad v imgrámci a div) s pripojenými obslužnými rutinami udalostí, táto hodnota určuje, ktorá udalosť sa vykoná ako prvá. Predvolene je nastavená na hodnotu false, čo znamená, že najskôr sa vykoná najvnútornejší obslužný program udalostí HTML (fáza prebublávania).

Príklad kódu addEventListener ()

Toto je jednoduchý príklad, ktorý som uviedol a ktorý vás ukazuje addEventListener()v akcii.

Keď používateľ klikne na tlačidlo, zobrazí sa správa. Ďalším kliknutím na tlačidlo sa správa skryje. Tu je relevantný JavaScript:

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

Ideme podľa predtým zobrazenej syntaxe pre addEventListener():

  • cieľ : prvok HTML sid='button'
  • funkcia : anonymná (šípka) funkcia, ktorá nastavuje kód potrebný na odhalenie / skrytie správy
  • useCapture : ponechané na predvolenú hodnotufalse

Moja funkcia dokáže odhaliť / skryť správu pridaním / odstránením triedy CSS s názvom „odhaliť“, ktorá mení viditeľnosť prvku správy.

Samozrejme vo svojom kóde môžete túto funkciu prispôsobiť. Anonymnú funkciu môžete tiež nahradiť vlastnou pomenovanou funkciou.

Úspešná udalosť ako parameter

Niekedy by sme mohli chcieť vedieť viac informácií o udalosti, napríklad o tom, na aký prvok sa kliklo. V tejto situácii musíme našej funkcii odovzdať parameter udalosti.

Tento príklad ukazuje, ako môžete získať ID prvku:

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

Tu je parametrom udalosti premenná, ktorá sa dá pomenovať, eale dá sa ľahko nazvať čímkoľvek iným, napríklad „udalosť“. Tento parameter je objekt, ktorý obsahuje rôzne informácie o udalosti, napríklad cieľové ID.

Nemusíte robiť nič zvláštne a JavaScript automaticky vie, čo má robiť, keď parametru takto odovzdáte svojej funkcii.

Odstránenie obslužných rutín udalostí

Ak z nejakého dôvodu nechcete, aby sa obslužná rutina udalosti aktivovala, môžete ju odstrániť nasledujúcim spôsobom:

target.removeEventListener(event, function, useCapture); 

Parametre sú rovnaké ako addEventListener().

Opakovanie je matka múdrosti

Najlepším spôsobom, ako sa zlepšiť v obsluhe udalostí, je cvičiť s vlastným kódom.

Tu je ukážkový projekt, ktorý som urobil, a v ktorom som pomocou obslužných rutín udalostí zmenil farbu, veľkosť a rýchlosť bubliniek prúdiacich cez pozadie webovej stránky (na odhalenie ovládacích prvkov budete musieť kliknúť na centrálny panel).

Bavte sa a choďte urobiť niečo úžasné!

Ak chcete získať viac informácií o vývoji webu vhodných pre začiatočníkov, navštívte môj blog na adrese 1000 Mile World a sledujte ma na Twitteri.