Teiesugused lugejad aitavad MUO-d toetada. Kui teete ostu meie saidil olevate linkide abil, võime teenida sidusettevõtte komisjonitasu. Loe rohkem.

Sündmuste haldamine on JavaScripti oluline kontseptsioon. Sündmused võimaldavad HTML-lehtedel olla dünaamilised ja interaktiivsed, võimaldades teil luua ahvatlevaid kasutajaliideseid. Saate kirjutada koodi JavaScripti käivitamiseks, kui DOM-is toimub sündmus.

Sündmus võib olla siis, kui kasutaja klõpsab HTML-i elemendil, leht laaditakse või kui sisestusvälja väärtus muutub. Saate kirjutada koodi, mis muudab sündmuse toimumisel HTML-i struktuuri. Siit saate teada kolmel erineval viisil, kuidas saate koodile sündmuste kuulajaid lisada.

1. AddEventListener meetod

AddEventListeneri meetod on üks populaarsemaid sündmuste kuulaja meetodid. Sellel on kolm parameetrit:

  • Sündmust kujutav objekt.
  • Funktsioon selle käsitlemiseks.
  • Valikuline tõeväärtus, useCapture, mis kirjeldab, kuidas sündmus levib kogu DOM-is.

Sündmus võib olla mis tahes määratud DOM-i sündmus sihtelemendil. Funktsioon on seadistatud sellele sündmusele reageerima, kui see juhtub.

instagram viewer

Funktsioon võib olla anonüümne või nimega funktsioon. Populaarsed sihtmärgid hõlmavad elementi, selle lapsi, dokumenti ja sündmust toetavat akent.

AddEventListener() on soovitatav meetod sündmuste kuulajate haldamiseks JavaScriptis. See töötab mis tahes sündmuse sihtmärgil, mitte ainult HTML-i elementide puhul, ja toetab mitut sündmuste käitlejat.

Võib-olla soovite DOM-is mõnda koodi käivitada. Saate printida teksti, teha arvutusi või kuvada pilti, kui kasutaja klõpsab nuppu.

Illustreerime järgmise koodiga:

html>
<html>
<keha>
<h1>Meetod addEventListener koos funktsioonidegah1>
<nuppuid="myBtn">Kliki siianuppu>
<lkid="demo">lk>
keha>
html>

Järgmisena lisage nupu abil sündmusekuulaja.

konst element = dokument.getElementById("myBtn");
element.addEventListener("klõpsake", minuFunktsioon1);
funktsiooniminuFunktsioon1() {
dokument.getElementById("demo").innerHTML += "Fuktsioon teostatud! "
}

Kui klõpsate nuppu, prinditakse ekraanile tekst „Function Execulted”, nagu allpool näidatud.

2. Sündmuste delegeerimine AddEventListenerile

Sündmuse delegeerimine JavaScriptis on muster, mida kasutatakse mitme sündmuse käsitlemiseks. Selle asemel, et lisada igale elemendile sündmusekuulaja, lisate sündmusekuulaja ainult esivanema elemendile. Sündmuse käivitanud elemendile pääsete juurde .sihtmärk sündmuse objekti vara.

See tagab, et kõik teie sihitud elemendid käituvad ühiselt. Ilma selleta peaksite igaühele sündmuste kuulaja käsitsi lisama.

Siin on näide sündmuse delegeerimisest:

html>
<html>
<keha>
<h1> Sündmuste delegatsioon nuppudelh1>
<div>
<nuppu>Nupp 1nuppu>
<nuppu>Nupp 2nuppu>
<nuppu>Nupp 3nuppu>
div>
keha>
html>

Järgmisena lisage sündmuste kuulajad kõikidele nuppudele vaid mõne koodireaga.

konst div = dokument.querySelector('div')
div.addEventListener("klõpsake", (sündmus) => {
kui (event.target.tagName 'BUTTON') {
konsool.log("Nupp klõpsatud")
 }
});

Sündmuse delegeerimine on muster, mis põhineb sündmuste mullitamisel. Sündmuste mullitamine toimub siis, kui element võtab sündmuse vastu ja edastab selle DOM-i ema- ja esivanematele. See on sündmuste levik kontseptsioon, mis vaikimisi toimub JavaScriptis.

3. Onclick atribuudi kasutamine

Saate kasutada atribuuti onclick JavaScripti käivitamiseks, kui kasutajad elemendil klõpsavad. Sarnaselt meetodile addEventListener saate onclick meetodit kasutada teksti printimiseks, arvutuste tegemiseks ja elementide funktsioonide muutmiseks. DOM.

Saate lisada onclick sündmuste kuulaja HTML-elemendi sisese sündmuste töötlejana. Sündmus toimub siis, kui kasutaja klõpsab elemendil. Muutke järgmise lõigu värvi dünaamiliselt meetodil onclick:

html>
<html>
<keha>
<h1> Käivitage onClick Eventsh1>
<lkid="demo"onclick="myFunction()">
 Teksti värvi muutmiseks klõpsake mind.
lk>
keha>
html>

Lisage JavaScripti faili järgmine kood:

funktsioonimyFunction() {
dokument.getElementById("demo").stiil.värv = "punane";
}

Väljund kuvatakse järgmiselt:

Miks õppida sündmuste kuulajate kohta?

JavaScripti arendajana kasutate projektides sageli sündmuste kuulajaid. Sündmuskuulajatega saate luua palju funktsioone, sealhulgas sündmuste mullitamist ja jäädvustamist. Nende mõistete mõistmine muudab teie rakendustes dünaamiliste liideste loomise lihtsamaks.