Tādi lasītāji kā jūs palīdz atbalstīt MUO. Veicot pirkumu, izmantojot saites mūsu vietnē, mēs varam nopelnīt filiāles komisiju. Lasīt vairāk.

Notikumu apstrāde ir svarīgs JavaScript jēdziens. Notikumi ļauj HTML lapām būt dinamiskām un interaktīvām, ļaujot jums izveidot pievilcīgas lietotāja saskarnes. Varat rakstīt kodu, lai palaistu JavaScript, kad DOM notiek notikums.

Notikums var būt tad, kad lietotājs noklikšķina uz HTML elementa, tiek ielādēta lapa vai kad mainās ievades lauka vērtība. Varat rakstīt kodu, kas maina HTML struktūru, kad notiek notikums. Uzziniet trīs dažādus veidus, kā savam kodam pievienot notikumu uztvērējus.

1. AddEventListener metode

AddEventListener metode ir viena no populārākajām notikumu klausītāju metodes. Tam ir trīs parametri:

  • Objekts, kas attēlo notikumu.
  • Funkcija, lai to apstrādātu.
  • Izvēles Būla vērtība useCapture, kas apraksta, kā notikums tiek izplatīts visā DOM.

Notikums var būt jebkurš norādīts DOM notikums mērķa elementā. Funkcija ir iestatīta, lai reaģētu uz šo notikumu, kad tas notiek.

Funkcija var būt anonīma vai nosaukta funkcija. Populāri mērķi ir elements, tā atvasinājumi, dokuments un logs, kas atbalsta notikumu.

AddEventListener() ir ieteicama metode notikumu uztvērēju administrēšanai JavaScript. Tas darbojas uz jebkura notikuma mērķa, ne tikai HTML elementiem, un atbalsta vairākus notikumu apdarinātājus.

Iespējams, vēlēsities izpildīt kādu kodu DOM. Varat izdrukāt tekstu, veikt aprēķinus vai parādīt attēlu, kad lietotājs noklikšķina uz pogas.

Ilustrēsim ar šādu kodu:

html>
<html>
<ķermeni>
<h1>AddEventListener metode ar funkcijāmh1>
<poguid="myBtn">Noklikšķiniet šeitpogu>
<lppid="demo">lpp>
ķermeni>
html>

Pēc tam pievienojiet notikumu uztvērēju, izmantojot pogu.

konst elements = dokumentu.getElementById("myBtn");
element.addEventListener("klikšķis", manaFunkcija1);
funkcijumana funkcija1() {
dokumentu.getElementById("demo").innerHTML += "Funkcija izpildīta! "
}

Noklikšķinot uz pogas, ekrānā tiek izdrukāts teksts “Funkcija izpildīta”, kā parādīts tālāk.

2. Notikumu deleģēšana programmai addEventListener

Notikuma deleģēšana JavaScript ir modelis, ko izmanto vairāku notikumu apstrādei. Tā vietā, lai katram elementam pievienotu notikumu uztvērēju, notikumu uztvērējs tiek pievienots tikai priekšteča elementam. Varat piekļūt elementam, kas aktivizēja notikumu, izmantojot .target pasākuma objekta īpašums.

Tas nodrošina, ka visiem jūsu atlasītajiem elementiem ir kopīga darbība. Bez tā jums katram būtu manuāli jāpievieno notikumu klausītājs.

Šeit ir pasākuma deleģēšanas piemērs:

html>
<html>
<ķermeni>
<h1> Pasākuma delegācija uz pogāmh1>
<div>
<pogu>1. pogapogu>
<pogu>2. pogapogu>
<pogu>3. pogapogu>
div>
ķermeni>
html>

Pēc tam pievienojiet notikumu uztvērējus visām pogām, izmantojot tikai dažas koda rindiņas.

konst div = dokumentu.querySelector("div")
div.addEventListener("klikšķis", (notikums) => {
ja (event.target.tagName 'BUTTON') {
konsole.log("Noklikšķināta poga")
 }
});

Pasākuma deleģēšana ir modelis, kura pamatā ir notikumu burbuļošana. Notikumu burbuļošana notiek, kad elements saņem notikumu un nosūta to saviem vecākiem un priekštečiem DOM. Tas ir an notikumu izplatīšana koncepcija, kas notiek pēc noklusējuma JavaScript.

3. Izmantojot onclick atribūtu

Varat izmantot atribūtu onclick, lai palaistu JavaScript, kad lietotāji noklikšķina uz elementa. Tāpat kā addEventListener metodi, varat izmantot metodi onclick, lai drukātu tekstu, veiktu aprēķinus un mainītu elementu funkcijas DOM.

Varat pievienot onclick notikumu uztvērēju kā iekļautu notikumu apdarinātāju HTML elementam. Notikums notiek, kad lietotājs noklikšķina uz elementa. Dinamiski mainiet nākamās rindkopas krāsu, izmantojot onclick metodi:

html>
<html>
<ķermeni>
<h1> Izpildiet onClick Eventsh1>
<lppid="demo"onclick="myFunction()">
 Noklikšķiniet uz manis, lai mainītu teksta krāsu.
lpp>
ķermeni>
html>

JavaScript failā pievienojiet šādu kodu:

funkcijumyFunction() {
dokumentu.getElementById("demo").style.color = "sarkans";
}

Izvade parādīsies kā parādīts:

Kāpēc mācīties par notikumu klausītājiem?

Kā JavaScript izstrādātājs jūs projektos bieži izmantosit notikumu klausītājus. Izmantojot notikumu klausītājus, varat izveidot daudzas funkcijas, tostarp burbuļošanu un notikumu tveršanu. Izprotot šos jēdzienus, jums būs vieglāk izveidot dinamiskas saskarnes jūsu lietojumprogrammās.