Tapahtumankäsittely on tärkeä käsite JavaScriptissä. Tapahtumat mahdollistavat HTML-sivujen dynaamisuuden ja interaktiivisuuden, jolloin voit luoda houkuttelevia käyttöliittymiä. Voit kirjoittaa koodin JavaScriptin suorittamiseksi, kun DOM: ssa tapahtuu tapahtuma.
Tapahtuma voi olla, kun käyttäjä napsauttaa HTML-elementtiä, sivu latautuu tai kun syöttökentän arvo muuttuu. Voit kirjoittaa koodia, joka muuttaa HTML-rakennetta tapahtuman sattuessa. Opi kolme eri tapaa lisätä tapahtumaseuraita koodiisi.
1. AddEventListener-menetelmä
AddEventListener-menetelmä on yksi suosituimmista tapahtumien kuuntelumenetelmiä. Siinä on kolme parametria:
- Tapahtumaa edustava esine.
- Toiminto sen hoitamiseksi.
- Valinnainen boolean, useCapture, joka kuvaa, kuinka tapahtuma etenee koko DOM: ssa.
Tapahtuma voi olla mikä tahansa määritetty DOM-tapahtuma kohdeelementissä. Toiminto on asetettu vastaamaan tapahtumaan, kun se tapahtuu.
Funktio voi olla anonyymi tai nimetty funktio. Suosittuja kohteita ovat elementti, sen alat, asiakirja ja tapahtumaa tukeva ikkuna.
AddEventListener() on suositeltava tapa hallita tapahtumaseuraita JavaScriptissä. Se toimii missä tahansa tapahtumakohteessa, ei vain HTML-elementeissä, ja tukee useita tapahtumakäsittelijöitä.
Haluat ehkä suorittaa jonkin koodin DOM: ssa. Voit tulostaa tekstiä, suorittaa laskutoimituksia tai näyttää kuvan, kun käyttäjä napsauttaa painiketta.
Havainnollistetaan seuraavalla koodilla:
html>
<html>
<kehon>
<h1>AddEventListener-menetelmä funktioillah1>
<-painikettaid="myBtn">Klikkaa tästä-painiketta>
<sid="demo">s>
kehon>
html>Lisää seuraavaksi tapahtuman kuuntelija -painikkeella.
konst elementti = asiakirja.getElementById("myBtn");
element.addEventListener("klikkaus", myFunction1);
toimintomyFunction1() {
asiakirja.getElementById("demo").innerHTML += "Faktio suoritettu! "
}
Kun napsautat painiketta, teksti "Function Executed" tulostuu näytölle alla olevan kuvan mukaisesti.
2. Tapahtumien delegointi addEventListeneriin
Tapahtuman delegointi JavaScriptissä on malli, jota käytetään useiden tapahtumien käsittelemiseen. Sen sijaan, että lisäisit tapahtumaseuraajan jokaiseen elementtiin, lisäät tapahtumaseuraajan vain esi-isäelementtiin. Pääset tapahtuman käynnistäneeseen elementtiin .kohde tapahtumaobjektin ominaisuus.
Tämä varmistaa, että kaikilla kohdistetuilla elementeillä on yhteinen toiminta. Ilman sitä sinun on lisättävä jokaiseen tapahtumakuuntelija manuaalisesti.
Tässä esimerkki tapahtuman delegoinnista:
html>
<html>
<kehon>
<h1> Tapahtuman delegaatio painikkeillah1>
<div>
<-painiketta>Painike 1-painiketta>
<-painiketta>Painike 2-painiketta>
<-painiketta>Painike 3-painiketta>
div>
kehon>
html>
Lisää seuraavaksi tapahtumien kuuntelijat kaikkiin painikkeisiin vain muutamalla koodirivillä.
konst div = asiakirja.querySelector("div")div.addEventListener("klikkaus", (tapahtuma) => {
jos (event.target.tagName 'BUTTON') {
konsoli.Hirsi('painiketta klikattiin')
}
});
Tapahtuman delegointi on malli, joka perustuu tapahtuman kuplitukseen. Tapahtumakuplus tapahtuu, kun elementti vastaanottaa tapahtuman ja lähettää sen DOM: n ylä- ja esi-elementeilleen. Se on tapahtuman leviäminen käsite, joka tapahtuu oletuksena JavaScriptissä.
3. Onclick-attribuutin käyttäminen
Voit käyttää onclick-attribuuttia JavaScriptin suorittamiseen, kun käyttäjät napsauttavat elementtiä. Kuten addEventListener-menetelmässä, voit käyttää onclick-menetelmää tekstin tulostamiseen, laskutoimituksiin ja elementtien ominaisuuksien muuttamiseen DOM.
Voit lisätä onclick-tapahtumaseuraajan upotettuna tapahtumakäsittelijänä HTML-elementtiin. Tapahtuma tapahtuu, kun käyttäjä napsauttaa elementtiä. Muuta seuraavan kappaleen väriä dynaamisesti onclick-menetelmällä:
html>
<html>
<kehon>
<h1> Suorita onClick Eventsh1>
<sid="demo"klikkaamalla="myFunction()">
Napsauta minua muuttaaksesi tekstini väriä.
s>
kehon>
html>Lisää JavaScript-tiedostoon seuraava koodi:
toimintomyFunction() {
asiakirja.getElementById("demo").tyyli.väri = "punainen";
}Tulos näyttää kuvan mukaiselta:
Miksi oppia tapahtumanseuraajista?
JavaScript-kehittäjänä käytät usein tapahtumakuuntelijoita projekteissa. Voit luoda lukuisia ominaisuuksia tapahtumakuuntelijoiden avulla, mukaan lukien kuplitus ja tapahtumien tallentaminen. Näiden käsitteiden ymmärtäminen helpottaa dynaamisten käyttöliittymien luomista sovelluksiisi.
