Izpratne par notikumu izplatīšanu JavaScript

JavaScript notikumi darbojas kā paziņojumi, ka ir notikusi lietotāja mijiedarbība vai cita darbība. Piemēram, noklikšķinot uz veidlapas pogas, jūsu pārlūkprogramma ģenerē notikumu, kas norāda, ka tas ir noticis. Ierakstīšana meklēšanas lodziņā arī izraisa notikumus, un šādi bieži vien darbojas automātiskais ieteikums tiešsaistē.

Programmā JavaScript notikumi, kas ietver lietotāja mijiedarbību, parasti tiek aktivizēti pret konkrētiem elementiem. Piemēram, noklikšķinot uz pogas, tiek parādīts notikums pret šo pogu. Taču notikumi arī izplatās: tie šauj pret citiem dokumentu hierarhijas elementiem.

Lasiet tālāk, lai uzzinātu visu par notikumu izplatīšanu un diviem atšķirīgajiem pieejamajiem veidiem.

Kas ir notikumu apstrāde JavaScript?

Varat izmantot JavaScript kodu, lai uztvertu un reaģētu uz notikumiem, ko rada tīmekļa lapa. Varat to darīt, lai ignorētu noklusējuma darbību vai veiktu darbības, ja noklusējuma nav. Izplatīts piemērs ir veidlapas validācija. Notikumu apstrāde ļauj pārtraukt parasto veidlapas iesniegšanas procesu.

Apsveriet šo piemēru:

Noklikšķiniet uz Es

Iepriekš minētajam kodam ir pogas elements ar ID ar nosaukumu poga. Tam ir klikšķu notikumu uztvērējs, kas kopā ar ziņojumu parāda brīdinājumu Sveika pasaule.

Kas ir notikumu izplatīšana?

Notikumu izplatīšanās apraksta secību, kādā notikumi virzās cauri DOM koks kad tīmekļa pārlūkprogramma tos aktivizē.

Pieņemsim, ka div tagā ir formas tags, un abiem ir onclick notikumu uztvērēji. Notikumu izplatīšana apraksta, kā viens notikumu uztvērējs var aktivizēt pēc otra.

Ir divi pavairošanas veidi:

1. Notikumu burbuļošana, ar kuru notikumi burbuļo uz augšu, no bērna uz vecāku.
2. Notikumu tveršana, ar kuru notikumi virzās lejup, no vecākiem uz bērnu.

Kas ir notikumu burbuļošana JavaScript?

Notikuma burbuļošana nozīmē, ka notikuma izplatīšanās virziens būs no pakārtotā elementa uz tā vecākelementu.

Apsveriet šādu piemēru. Tam ir trīs ligzdoti elementi: div, forma un poga. Katram elementam ir a klikšķis notikumu klausītājs. Pārlūkprogrammā tiek parādīts brīdinājums ar ziņojumu, noklikšķinot uz katra elementa.

Pēc noklusējuma secība, kādā tīmekļa pārlūkprogramma parāda brīdinājumus, būs poga, forma, pēc tam div. Notikumi kūsā no bērna uz vecāku.

 div


 formā 



 Poga

Kas ir notikumu tveršana?

Izmantojot notikumu tveršanu, izplatīšanas secība ir pretēja burbuļošanai. Pretējā gadījumā jēdziens ir identisks. Vienīgā atšķirība tveršanā ir tā, ka notikumi notiek no vecākiem līdz bērnam. Atšķirībā no iepriekšējā piemēra, izmantojot notikumu tveršanu, pārlūkprogramma rādīs brīdinājumus šādā secībā: div, forma un poga.

Lai panāktu notikumu tveršanu, kodā ir jāveic tikai viena izmaiņa. Otrais parametrs addEventListener() nosaka pavairošanas veidu. Pēc noklusējuma tas ir nepatiess, lai attēlotu burbuļošanu. Lai iespējotu notikumu tveršanu, otrajam parametram ir jāiestata vērtība True.

 div.addEventListener("klikšķis", ()=>{
 brīdinājums ("div")
 }, taisnība);
 form.addEventListener("klikšķis", ()=>{
 brīdinājums ("veidlapa")
 }, taisnība);
 button.addEventListener("klikšķis", ()=>{
 brīdinājums ("poga")
 }, taisnība);

Kā jūs varat novērst notikumu izplatīšanos?

Varat apturēt notikumu izplatīšanos, izmantojot stopPropagation() metodi. The addEventListener() metode pieņem notikuma nosaukumu un apstrādātāja funkciju. Apdarinātājs kā parametru izmanto notikuma objektu. Šajā objektā ir visa informācija par notikumu.

Kad jūs izsaucat stopPropagation() metodi, notikums pārtrauks izplatīties no šī punkta. Piemēram, kad lietojat stopPropagation() formas elementā notikumi pārstās burbuļot līdz div. Ja noklikšķināsit uz pogas, redzēsit notikumus, kas tiek parādīti uz pogas un veidlapas, bet ne uz div.

form.addEventListener("klikšķis", (e)=>{
e.stopPropagation();
 brīdinājums ("veidlapa");
});

Saistīts: Ultimate JavaScript apkrāptu lapa

JavaScript ir daudz spēka zem pārsega

JavaScript notikumu apstrāde ir jaudīga, salīdzināma ar daudzām pilnvērtīgām saskarnes valodām. Izstrādājot interaktīvas tīmekļa lietojumprogrammas, tā ir svarīga jūsu rīkkopas sastāvdaļa. Taču ir jāaptver daudzas citas progresīvas tēmas. Profesionāliem JavaScript izstrādātājiem ir daudz ko mācīties!

Ja vēlaties iemācīties kodēt JavaScript kā profesionāls, izlasiet mūsu ceļvedi par gudriem ieliktņiem un sagatavojieties, lai nākamajā intervijā būtu labi.

11 JavaScript One-Liners, kas jums jāzina

Sasniedziet daudz ar nelielu kodu, izmantojot šo plašo JavaScript vienas līnijas klāstu.

Lasiet Tālāk

Par autoru