Kako implementirati metodu addEventListener () u JavaScript?

AddEventListener () je ugrađena JavaScript funkcija koja uzima događaj da ga presluša i pozove kada se opisani događaj aktivira.

Događaj je važan dio . Web stranica odgovara prema događaju koji se dogodio. Neke događaje generiraju korisnici, a neke generiraju API-ji. U ovom ćemo članku vidjeti kako se događaju događaji i kako se metoda addEventListener u JavaScript koristi u sljedećem slijedu:

Što je slušatelj događaja?

Slušatelj događaja je postupak u JavaScript-u koji čeka na događaj. Jednostavan primjer događaj je korisnik koji klikće mišem ili pritiska tipku na tipkovnici.





The addEventListener () je ugrađen JavaScript funkcija koji događaj treba poslušati i drugi argument koji se poziva kad god se opisani događaj aktivira. Bilo koji broj obrađivača događaja može se dodati jednom elementu bez prepisivanja postojećih obrađivača događaja.

addEventListener () u JavaScript-u

Neki od značajke metode slušatelja događaja uključuju:



  • The addEventListener () metoda pridružuje rukovatelj događajima na navedeni element.
  • Ova metoda pridružuje obrađivač događaja elementu bez prepisivanje postojeći voditelji događaja.
  • Možete dodati mnogi voditelji događaja na jedan element.
  • Možete dodati mnogo rukovatelja događajima isti tip prema jednom element , tj. dva događaja 'klik'.
  • Slušatelji događaja mogu se dodati bilo kojem OSUDA objekt ne samo HTML elementi. tj. objekt prozora.
  • Metoda addEventListener () to čini lakše kontrolirati kako događaj reagira do žuborenja.

Kada se koristi metoda addEventListener (), JavaScript se odvaja od markup, za bolju čitljivost i omogućuje vam dodavanje slušatelja događaja čak i kada ne kontrolirate HTML markup.

Također, slušatelj događaja možete lako ukloniti pomoću removeEventListener () metoda .

Sintaksa:



target.addEventListener (vrsta, slušatelj [, opcije]) target.addEventListener (vrsta, slušatelj [, useCapture]) target.addEventListener (vrsta, slušatelj [, useCapture, želiUntrusted])

Vrijednosti parametara

Parametar Opis

događaj

Potreban. Niz koji navodi naziv događaja.

Napomena: Ne koristite prefiks 'on'. Na primjer, koristite 'klik' umjesto 'onclick'.

traka napretka u html-u pomoću javascripta

Popis svih HTML DOM događaja potražite u našoj cjelovitoj referenci predmeta HTML DOM događaja.

funkcija

Potreban. Određuje funkciju koja će se pokrenuti kada se dogodi događaj.

Kada se događaj dogodi, objekt događaja se prenosi funkciji kao prvi parametar. Vrsta događaja objekt ovisi o navedenom događaju. Na primjer, događaj 'klik' pripada objektu MouseEvent.

useCapture

Neobvezno. Logička vrijednost koja određuje treba li događaj izvršiti u fazi hvatanja ili u fazi mjehurića.

Moguće vrijednosti: true - Obrađivač događaja izvršava se u fazi hvatanja - False - Zadano. Obrađivač događaja izvršava se u fazi mjehurića


Sad kad znate kako slušatelj događaja radi, pogledajmo primjer addEventListener () u JavaScript-u.

addEventListener () u JavaScript-u: Primjer

 
& Lt! DOCTYPEhtml & gt i lthtml & gt i ltbody & gt i LTP i gtThis primjer koristi addEventListener () metoda za izvršavanje funkcije kada korisnik klikne na tipku. & Lt / p & gt & ltbutton id = 'myBtn' i gtTry je & lt / gumb & gt & LTP id = 'Demo' & gt & ltscript & gt document.getElementById ('myBtn'). addEventListener ('click', myFunction) funkcija myFunction () {document.getElementById ('demo'). innerHTML = 'Hello World'} & lt / script & gt & lt / body & gt & lt / html & gt

addEventListener u JavaScript-u

Ovim smo došli do kraja ovog addEventListenera u JavaScript-u. Nadam se da ste razumjeli kako slušatelj događaja metoda radi u JavaScript-u.

Pogledajte naš koja dolazi s treningom uživo pod vodstvom instruktora i iskustvom u stvarnom životu. Ovaj trening čini vas vještima za rad s back-end i front-end web tehnologijama. Uključuje obuku o web razvoju, jQueryju, Angularu, NodeJS, ExpressJS i MongoDB.

Imate pitanje za nas? Molimo vas da ga spominjete u odjeljku za komentare bloga “addEventListener u JavaScriptu”, a mi ćemo vam se javiti.