Tapahtuman leviämisen ymmärtäminen JavaScriptissä

JavaScriptin tapahtumat toimivat kuin ilmoitukset käyttäjän vuorovaikutuksesta tai muusta toiminnosta. Kun esimerkiksi napsautat lomakepainiketta, selaimesi luo tapahtuman, joka ilmaisee tämän tapahtuneen. Hakukenttään kirjoittaminen herättää myös tapahtumia, ja näin automaattinen ehdotus toimii usein verkossa.

JavaScriptissä tapahtumat, joihin liittyy käyttäjän vuorovaikutusta, käynnistyvät yleensä tiettyjä elementtejä vastaan. Esimerkiksi painikkeen napsauttaminen herättää tapahtuman painiketta vastaan. Mutta tapahtumat myös leviävät: ne ampuvat muita asiakirjahierarkian elementtejä vastaan.

Lue eteenpäin saadaksesi lisätietoja tapahtumien leviämisestä ja kahdesta eri tyypistä.

Mitä on tapahtumien käsittely JavaScriptissä?

Voit käyttää JavaScript-koodia havaitaksesi verkkosivun herättämiä tapahtumia ja vastata niihin. Voit tehdä tämän ohittaaksesi oletuskäyttäytymisen tai ryhtyä toimiin, kun oletusarvoa ei ole. Yleinen esimerkki on lomakkeen validointi. Tapahtumien käsittelyn avulla voit keskeyttää lomakkeen normaalin lähetysprosessin.

Harkitse tätä esimerkkiä:

Napsauta Minä

Yllä olevassa koodissa on painikeelementti, jonka tunnus on nimeltään painike. Siinä on napsautustapahtuman kuuntelija, joka näyttää varoituksen viestin kanssa Hei maailma.

Mitä on tapahtumien leviäminen?

Tapahtuman eteneminen kuvaa järjestystä, jossa tapahtumat kulkevat läpi DOM-puu kun verkkoselain käynnistää ne.

Oletetaan, että div-tunnisteen sisällä on lomaketunniste, ja molemmilla on onclick-tapahtumaseuraajat. Tapahtuman leviäminen kuvaa, kuinka yksi tapahtumaseuraaja voi käynnistyä toisensa jälkeen.

Lisääntymistä on kahta tyyppiä:

1. Tapahtumakuplus, jolla tapahtumat kuplivat ylöspäin, lapselta vanhemmalle.
2. Tapahtumien taltiointi, jonka avulla tapahtumat kulkevat alaspäin vanhemmalta lapselle.

Mitä on tapahtumakuplus JavaScriptissä?

Tapahtumakuplus tarkoittaa, että tapahtuman etenemissuunta on alielementistä sen yläelementtiin.

Harkitse seuraavaa esimerkkiä. Siinä on kolme sisäkkäistä elementtiä: div, form ja button. Jokaisella elementillä on a klikkaus tapahtuman kuuntelija. Selain näyttää an hälytys viestillä, kun napsautat kutakin elementtiä.

Oletusarvoisesti selain näyttää hälytyksiä: painike, lomake ja sitten div. Tapahtumat kuplivat lapsesta vanhemmalle.

 div


 muodossa 



 Painike

Mitä on tapahtumien taltiointi?

Tapahtumien sieppauksessa etenemisjärjestys on päinvastainen kuin kupliminen. Muuten konsepti on sama. Ainoa ero kuvaamisessa on, että tapahtumat tapahtuvat vanhemmalta lapselle. Toisin kuin edellisessä esimerkissä, tapahtumakaappauksen yhteydessä selain näyttää hälytykset tässä järjestyksessä: div, form ja button.

Tapahtumien sieppaamiseksi sinun on tehtävä vain yksi muutos koodiin. Toinen parametri addEventListener() määrittelee leviämisen tyypin. Se on oletusarvoisesti epätosi edustamaan kuplivaa. Jotta tapahtumien sieppaus voidaan ottaa käyttöön, sinun on asetettava toinen parametri arvoon tosi.

 div.addEventListener("click", ()=>{
 hälytys("div")
 }, totta);
 form.addEventListener("click", ()=>{
 hälytys ("lomake")
 }, totta);
 button.addEventListener("click", ()=>{
 hälytys ("painike")
 }, totta);

Kuinka voit estää tapahtumien leviämisen?

Voit pysäyttää tapahtumien leviämisen käyttämällä stopPropagation() menetelmä. The addEventListener() menetelmä hyväksyy tapahtuman nimen ja käsittelijän funktion. Käsittelijä ottaa parametriksi tapahtumaobjektin. Tämä objekti sisältää kaikki tiedot tapahtumasta.

Kun kutsut stopPropagation() menetelmällä, tapahtuma lopettaa etenemisen tästä pisteestä. Esimerkiksi kun käytät stopPropagation() lomakeelementissä tapahtumat lopettavat kuplimisen div-elementtiin asti. Jos napsautat painiketta, näet tapahtumat painikkeessa ja lomakkeessa, mutta et div.

form.addEventListener("click", (e)=>{
e.stopPropagation();
 hälytys("lomake");
});

Aiheeseen liittyvä: Ultimate JavaScript-huijauslehti

JavaScriptillä on paljon voimaa konepellin alla

JavaScriptin tapahtumankäsittely on tehokas, verrattavissa moniin täysimittaisiin käyttöliittymäkieliin. Kun kehität interaktiivisia verkkosovelluksia, se on tärkeä osa työkalupakkiasi. Mutta on monia muita edistyneitä aiheita, jotka on otettava huomioon. Ammattimaisilla JavaScript-kehittäjillä on paljon opittavaa!

Jos haluat oppia koodaamaan JavaScriptiä kuin ammattilainen, tutustu älykkäiden alusten oppaaseemme ja valmistaudu vauhtiin seuraavassa haastattelussasi.

11 JavaScript One-Lineriä, jotka sinun pitäisi tietää

Saavuta paljon pienellä koodilla käyttämällä tätä laajaa JavaScript-yhteensopivuusvalikoimaa.

Lue Seuraava

Kirjailijasta