Bralci, kot ste vi, pomagajo podpirati MUO. Ko opravite nakup prek povezav na našem spletnem mestu, lahko zaslužimo partnersko provizijo. Preberi več.

Obdelava dogodkov je pomemben koncept v JavaScriptu. Dogodki omogočajo, da so strani HTML dinamične in interaktivne, kar vam omogoča ustvarjanje privlačnih uporabniških vmesnikov. Napišete lahko kodo za zagon JavaScripta, ko pride do dogodka v DOM.

Dogodek je lahko, ko uporabnik klikne element HTML, se stran naloži ali ko se spremeni vrednost vnosnega polja. Napišete lahko kodo, ki spremeni strukturo HTML, ko pride do dogodka. Spoznajte tri različne načine, kako lahko svoji kodi dodate poslušalce dogodkov.

1. Metoda addEventListener

Metoda addEventListener je ena izmed priljubljenih metode poslušalcev dogodkov. Ima tri parametre:

  • Objekt, ki predstavlja dogodek.
  • Funkcija za obvladovanje tega.
  • Izbirna logična vrednost useCapture, ki opisuje, kako se dogodek širi po DOM.

Dogodek je lahko kateri koli določen dogodek DOM na ciljnem elementu. Funkcija je nastavljena tako, da se odzove na ta dogodek, ko se zgodi.

instagram viewer

Funkcija je lahko anonimna ali poimenovana funkcija. Priljubljeni cilji vključujejo element, njegove otroke, dokument in okno, ki podpira dogodek.

addEventListener() je priporočena metoda za upravljanje poslušalcev dogodkov v JavaScriptu. Deluje na katerem koli cilju dogodka, ne samo na elementih HTML, in podpira več obdelovalcev dogodkov.

Morda boste želeli izvesti nekaj kode na DOM. Ko uporabnik klikne gumb, lahko natisnete besedilo, izvedete izračune ali prikažete sliko.

Ponazorimo z naslednjo kodo:

html>
<html>
<telo>
<h1>Metoda addEventListener s funkcijamih1>
<gumbid="myBtn">Klikni tukajgumb>
<strid="demo">str>
telo>
html>

Nato z gumbom dodajte poslušalca dogodkov.

konst element = dokument.getElementById("myBtn");
element.addEventListener("klik", mojaFunkcija1);
funkcijomojaFunkcija1() {
dokument.getElementById("demo").notranjiHTML += "Fukcija izvedena! "
}

Ko kliknete gumb, se na zaslonu natisne besedilo 'Function Executed', kot je prikazano spodaj.

2. Prenos dogodkov na addEventListener

Delegiranje dogodka v JavaScriptu je vzorec, ki se uporablja za obravnavanje več dogodkov. Namesto dodajanja poslušalca dogodkov vsakemu elementu, poslušalca dogodkov dodate le elementu prednika. Do elementa, ki je sprožil dogodek, lahko dostopate prek .tarča lastnost predmeta dogodka.

To zagotavlja, da imajo vsi ciljni elementi skupno vedenje. Brez tega bi morali vsakemu ročno dodati poslušalca dogodkov.

Tukaj je primer delegiranja dogodka:

html>
<html>
<telo>
<h1> Delegiranje dogodka na gumbihh1>
<div>
<gumb>Gumb 1gumb>
<gumb>Gumb 2gumb>
<gumb>Gumb 3gumb>
div>
telo>
html>

Nato dodajte poslušalce dogodkov vsem gumbom z le nekaj vrsticami kode.

konst div = dokument.querySelector('div')
div.addEventListener("klik", (dogodek) => {
če (event.target.tagName 'GUMB') {
konzola.log('Kliknjen gumb')
 }
});

Delegiranje dogodkov je vzorec, ki temelji na mehurčkih dogodkov. Mehurčki dogodkov se zgodi, ko element prejme dogodek in ga posreduje svojim nadrejenim in predniškim elementom v DOM. Je an širjenje dogodkov koncept, ki se privzeto zgodi v JavaScriptu.

3. Uporaba atributa onclick

Atribut onclick lahko uporabite za zagon JavaScripta, ko uporabniki kliknejo element. Tako kot metodo addEventListener lahko uporabite metodo onclick za tiskanje besedila, izvajanje izračunov in spreminjanje funkcij elementov na DOM.

Poslušalnik dogodkov onclick lahko dodate elementu HTML kot vgrajeni obravnavalec dogodkov. Dogodek se zgodi, ko uporabnik klikne na element. Dinamično spremenite barvo naslednjega odstavka z metodo onclick:

html>
<html>
<telo>
<h1> Izvedi dogodke onClickh1>
<strid="demo"onclick="mojaFunkcija()">
 Kliknite me, če želite spremeniti barvo besedila.
str>
telo>
html>

V datoteko JavaScript dodajte to kodo:

funkcijomojaFunkcija() {
dokument.getElementById("demo").style.color = "rdeča";
}

Izhod bo prikazan, kot je prikazano:

Zakaj izvedeti več o poslušalcih dogodkov?

Kot razvijalec JavaScript boste v projektih pogosto uporabljali poslušalce dogodkov. S poslušalci dogodkov lahko ustvarite številne funkcije, vključno z brbotanjem in zajemanjem dogodkov. Razumevanje teh konceptov vam bo olajšalo ustvarjanje dinamičnih vmesnikov v vaših aplikacijah.