Rukovanje događajima važan je koncept u JavaScriptu. Događaji omogućuju HTML stranicama da budu dinamične i interaktivne, što vam omogućuje stvaranje privlačnih korisničkih sučelja. Možete napisati kod za pokretanje JavaScripta kada se dogodi događaj na DOM-u.
Događaj može biti kada korisnik klikne HTML element, stranica se učita ili kada se promijeni vrijednost polja za unos. Možete napisati kod koji mijenja HTML strukturu kada se dogodi događaj. Naučite tri različita načina na koje možete dodati slušatelje događaja u svoj kod.
1. Metoda addEventListener
Metoda addEventListener jedna je od popularnih metode slušatelja događaja. Ima tri parametra:
- Objekt koji predstavlja događaj.
- Funkcija za rukovanje time.
- Neobavezna booleova vrijednost, useCapture, koja opisuje kako se događaj širi kroz DOM.
Događaj može biti bilo koji navedeni DOM događaj na ciljnom elementu. Funkcija je postavljena da odgovori na taj događaj kada se dogodi.
Funkcija može biti anonimna ili imenovana funkcija. Popularni ciljevi uključuju element, njegovu djecu, dokument i prozor koji podržava događaj.
addEventListener() preporučena je metoda za administriranje slušatelja događaja u JavaScriptu. Radi na bilo kojem cilju događaja, ne samo na HTML elementima, i podržava više rukovatelja događajima.
Možda želite izvršiti neki kod na DOM-u. Možete ispisati tekst, izvršiti izračune ili prikazati sliku kada korisnik klikne gumb.
Ilustrirajmo sljedećim kodom:
html>
<html>
<tijelo>
<h1>Metoda addEventListener s funkcijamah1>
<dugmeiskaznica="mojBtn">Kliknite ovdjedugme>
<striskaznica="demo">str>
tijelo>
html>Zatim dodajte slušatelja događaja pomoću gumba.
konst element = dokument.getElementById("mojBtn");
element.addEventListener("klik", mojaFunkcija1);
funkcijamojaFunkcija1() {
dokument.getElementById("demo").unutarnjiHTML += "Fukcija izvršena! "
}
Kada kliknete gumb, na ekranu se ispisuje tekst 'Funkcija izvršena', kao što je prikazano u nastavku.
2. Delegiranje događaja za addEventListener
Delegiranje događaja u JavaScriptu obrazac je koji se koristi za rukovanje više događaja. Umjesto dodavanja slušatelja događaja svakom elementu, slušatelja događaja dodajete samo elementu pretka. Možete pristupiti elementu koji je pokrenuo događaj putem .cilj svojstvo objekta događaja.
Ovo osigurava da svi elementi koje ciljate imaju zajedničko ponašanje. Bez toga, svakom biste morali ručno dodati slušatelja događaja.
Evo primjera delegiranja događaja:
html>
<html>
<tijelo>
<h1> Delegiranje događaja na gumbimah1>
<div>
<dugme>Gumb 1dugme>
<dugme>Gumb 2dugme>
<dugme>Gumb 3dugme>
div>
tijelo>
html>
Zatim dodajte slušatelje događaja svim gumbima sa samo nekoliko redaka koda.
konst div = dokument.querySelector('div')div.addEventListener("klik", (događaj) => {
ako (event.target.tagName 'DUGME') {
konzola.log('Gumb je kliknut')
}
});
Delegiranje događaja je obrazac koji se temelji na mjehurićima događaja. Mjehurić događaja događa se kada element primi događaj i prenese ga svojim nadređenim i prethodnim elementima u DOM-u. To je širenje događaja koncept koji se prema zadanim postavkama pojavljuje u JavaScriptu.
3. Korištenje atributa onclick
Možete koristiti atribut onclick za pokretanje JavaScripta kada korisnici kliknu na element. Poput metode addEventListener, metodu onclick možete koristiti za ispis teksta, izvođenje izračuna i promjenu značajki elementa na DOM.
Možete dodati onclick slušatelja događaja kao ugrađeni rukovatelj događajima u HTML element. Događaj se događa kada korisnik klikne na element. Dinamički promijenite boju sljedećeg odlomka metodom onclick:
html>
<html>
<tijelo>
<h1> Izvrši onClick događajeh1>
<striskaznica="demo"na klik="mojaFunkcija()">
Kliknite me da promijenite boju teksta.
str>
tijelo>
html>U JavaScript datoteku dodajte sljedeći kod:
funkcijamojaFunkcija() {
dokument.getElementById("demo").style.color = "Crvena";
}Izlaz će se pojaviti kao što je prikazano:
Zašto učiti o slušateljima događaja?
Kao JavaScript programer, često ćete koristiti slušatelje događaja u projektima. Možete stvoriti brojne značajke sa slušateljima događaja, uključujući bubbling i snimanje događaja. Razumijevanje ovih koncepata olakšat će vam stvaranje dinamičkih sučelja na vašim aplikacijama.
