Metoda addEventListener () - Primjer koda slušatelja JavaScript događaja

Programiranje

Metoda JavaScript addEventListener () omogućuje vam postavljanje funkcija koje će se pozivati ​​kada se dogodi određeni događaj, na primjer kada korisnik klikne gumb. Ovaj vam vodič pokazuje kako možete implementirati addEventListener () u svoj kôd.

Razumijevanje događaja i voditelja događaja

Događaji su radnje koje se događaju kada korisnik ili preglednik manipulira stranicom. Oni igraju važnu ulogu jer mogu uzrokovati dinamičke promjene elemenata web stranice.

Na primjer, kada preglednik završi s učitavanjem dokumenta, loaddogodio se događaj. Ako korisnik klikne gumb na stranici, tada clickse dogodio događaj.

Mnogi se događaji mogu dogoditi jednom, više puta ili nikad. Također možda nećete znati kada će se događaj dogoditi, pogotovo ako je generiran od strane korisnika.

U ovim scenarijima potreban vam je rukovatelj događajima koji će otkriti kada se događaj dogodi. Na taj način možete postaviti kôd da reagira na događaje u trenutku kada se oni događaju u letu.

JavaScript pruža obradu događaja u obliku addEventListener()metode. Ovaj rukovatelj može se pridružiti određenom HTML elementu za koji želite nadzirati događaje, a element može imati priključeno više obrađivača.

sintaksa addEventListener ()

Evo sintakse:

target.addEventListener(event, function, useCapture)
  • target : HTML element u koji želite dodati svoj rukovatelj događajima. Ovaj element postoji kao dio objektnog modela dokumenta (DOM) i možda ćete htjeti naučiti kako odabrati DOM element.
  • događaj : niz koji specificira naziv događaja. Već smo spomenuli loadi clickdogađaje. Za znatiželjnike, evo cijelog popisa HTML DOM događaja.
  • funkcija : određuje funkciju koja će se pokretati kada se događaj otkrije. To je čarolija koja omogućuje vašim web stranicama da se dinamički mijenjaju.
  • useCapture : neobavezna logička vrijednost (true ili false) koja određuje treba li događaj izvršiti u fazi hvatanja ili mjehurića. U slučaju ugniježđenih HTML elemenata (kao što je imgunutar a div) s pridruženim obrađivačima događaja, ova vrijednost određuje koji će se događaj prvo izvršiti. Prema zadanim postavkama postavljeno je na false, što znači da se prvo izvršava unutarnji obrađivač HTML događaja (faza bubblinga).

Primjer koda addEventListener ()

Ovo je jednostavan primjer koji sam vam pokazao addEventListener()na djelu.

Kad korisnik klikne gumb, prikazuje se poruka. Još jedan klik gumba skriva poruku. Evo relevantnog JavaScript-a:

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

Prateći sintaksu prikazanu prethodno za addEventListener():

  • cilj : HTML element said='button'
  • funkcija : anonimna (strelica) funkcija koja postavlja kod potreban za otkrivanje / skrivanje poruke
  • useCapture : lijevo do zadane vrijednostifalse

Moja funkcija može otkriti / sakriti poruku dodavanjem / uklanjanjem CSS klase nazvane "otkrivanje" koja mijenja vidljivost elementa poruke.

Naravno, u svom kodu slobodno prilagodite ovu funkciju. Anonimnu funkciju također možete zamijeniti vlastitom imenovanom funkcijom.

Donošenje događaja kao parametra

Ponekad bismo možda željeli znati više informacija o događaju, poput onoga na koji je element kliknut. U ovoj situaciji trebamo proslijediti parametar događaja našoj funkciji.

Ovaj primjer pokazuje kako možete dobiti id elementa:

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

Ovdje je parametar događaja varijabla s imenom, eali se lako može nazvati bilo čime drugim, poput "događaj". Ovaj je parametar objekt koji sadrži razne informacije o događaju, kao što je ciljni ID.

Ne morate raditi ništa posebno, a JavaScript automatski zna što treba učiniti kada parametar na ovaj način prenesete u svoju funkciju.

Uklanjanje voditelja događaja

Ako iz nekog razloga više ne želite da se pokretač događaja aktivira, evo kako ga ukloniti:

target.removeEventListener(event, function, useCapture);

Parametri su isti kao addEventListener().

Vježbom do savršenstva

Najbolji način da se poboljšate s voditeljima događaja je vježbanje s vlastitim kodom.

Evo primjera projekta koji sam radio u kojem sam pomoću rukovatelja događajima mijenjao boju, veličinu i brzinu mjehurića koji teku preko pozadine web stranice (morat ćete kliknuti na središnju ploču da biste otkrili kontrole).

Zabavite se i idite napraviti nešto super!

Za više znanja o web razvoju prilagođenim početnicima posjetite moj blog na 1000 Mile World i pratite me na Twitteru.