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?
- AddEventListener () u JavaScript-u
- Vrijednosti parametara
- AddEventListener u JavaScript-u: Primjer
Š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 
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.