Barbotarea evenimentelor și capturarea evenimentelor în Javascript explicate: Cum se utilizează?

Publicat: 2020-03-26

Cuprins

Introducere

Două terminologii foarte frecvente utilizate pentru fluxul de evenimente în JavaScript sunt Event Bubbling și Event Capturing .

Acestea sunt două moduri importante în care un eveniment este propagat în API-ul HTML DOM atunci când ambele elemente înregistrează un handle pentru un eveniment, iar evenimentul are loc într-un element imbricat într-un alt element. Ordinea în care un eveniment este primit de către elemente este determinată de modul de propagare a evenimentului. Citiți mai departe pentru a cunoaște utilizarea Event Bubbling și Event Capturing în JavaScript și de ce acestea sunt necesare în dezvoltarea paginilor web.

Recomandări cheie

  • Explicarea termenilor eveniment, flux de evenimente, handler de evenimente și ascultători de evenimente
  • Bubble de evenimente și Captură de evenimente în JavaScript
  • Utilitate pentru barbotarea evenimentelor și captarea evenimentelor în JavaScript

Evenimente și flux de evenimente

Interacțiunea paginilor web HTML cu JavaScript este mediată de evenimente care apar atunci când pagina este manipulată de utilizator sau de browser. Încărcarea unei pagini, utilizatorul făcând clic pe un buton, închiderea unei ferestre, toate sunt exemple de evenimente.

Ordinea în care sunt primite evenimentele pe pagina web este denumită flux de evenimente. Procesul de flux al evenimentului este finalizat în 3 pași – captarea evenimentului (interceptarea evenimentului), țintirea evenimentului (ținta primește evenimentul) și balonarea evenimentului (răspunsul la eveniment).

Manageri de evenimente și ascultători de evenimente în JavaScript

Event Handler este un cod JavaScript care este scris în interiorul etichetelor HTML, nu în interiorul etichetelor <script>. Managerii de evenimente execută JavaScript atunci când are loc un eveniment, cum ar fi apăsarea unui buton. Sintaxa de bază este: name_of_handler="Cod JavaScript aici"

<a href="https://www.google.com” onClick="alert('hello!")”>Goolge</a>

O procedură care așteaptă apariția unui eveniment este un Event Listener. JavaScript are o funcție încorporată, addEventListener(), care primește evenimentul pentru a-l asculta și apelează un al doilea argument când evenimentul menționat este declanșat. Sintaxa este: element.addEventListener(event, listener);

Bubble de evenimente în JavaScript

Event Bubbling este o terminologie comună care este întâlnită în timpul dezvoltării unei pagini web sau a unei aplicații web folosind JavaScript. Barbotarea evenimentelor este o etapă a procesului fluxului de evenimente când evenimentul începe la cel mai specific element sau la cel mai profund nod imbricat din DOM și, ulterior, curge în sus către nodul care este cel mai puțin specific, adică documentul.

Sursă

<!DOCTYPE HTML>
<html>
<cap>
<title>……</title>
</cap>
<corp>
<div id=”demo”> Apăsați aici.</div>
</corp>
</html>

Făcând clic pe elementul <div>, evenimentul „clic” are loc în următoarea ordine:

  1. <div>
  2. <corp>
  3. <html>
  4. Document

Evenimentul „clic” declanșează elementul <div>. Fiecare nod este declanșat ulterior de-a lungul arborelui DOM, în sus, până când se ajunge la documentul obiect.

Citiți: Stiva completă de idei și subiecte de proiecte

Capturarea evenimentelor în JavaScript

Capturarea evenimentelor este un model alternativ în fluxul de evenimente care a fost introdus pentru prima dată de Netscape Browser. După cum se arată în acest model, un eveniment este primit mai întâi de nodul cel mai puțin specific și cel mai specific nod sau elementul cel mai profund imbricat primește evenimentul ultimul. În acest model, un eveniment este interceptat înainte de a ajunge la ținta reală. Cu toate acestea, spre deosebire de Event Bubbling, browserele moderne nu suportă acest model și, prin urmare, Event Capturing poate fi utilizată numai în circumstanțe particulare.

Sursă

Referindu-ne la exemplul prezentat în secțiunea anterioară, făcând clic pe elementul <div> declanșează evenimentul „clic” în următoarea ordine:

  1. Document
  2. <corp>
  3. <html>
  4. <div>

Ce se întâmplă în faza de captare a evenimentelor?

În faza de captare a evenimentului, sunt apelați ascultătorii de captare a căror valoare este înregistrată ca „adevărat”. Este scris în felul următor:

el.addEventListener('Click', ascultător, adevărat)

Aici un eveniment este capturat deoarece valoarea ascultătorului este înregistrată ca „adevărat”. În cazul în care nu există nicio valoare, valoarea implicită este „falsă”, cu rezultatul că evenimentul nu este capturat. Prin urmare, în această fază, numai evenimentele cu valoare adevărată sunt apelate și sunt capturate. În faza țintă ulterioară, toți ascultătorii care sunt înregistrați sunt apelați, indiferent dacă valoarea lor este înregistrată ca adevărată sau falsă.

Fluxul de evenimente DOM în JavaScript

Nivelul 2 DOM specifică trei etape pentru modelul fluxului de evenimente:

  • Faza de captare a evenimentelor
  • La țintă
  • Faza de barbotare a evenimentelor

Sursă

Dacă există posibilitatea de a intercepta evenimentul, Capturarea evenimentului are loc mai întâi. Aceasta este urmată de ținta reală care primește evenimentul. În cele din urmă, în faza de barbotare a evenimentului, are loc răspunsul final la eveniment. Referindu-ne la exemplul prezentat în secțiunea anterioară, făcând clic pe elementul <div> declanșează evenimentul „clic” în ordinea ilustrată în diagrama de mai sus.

Citiți: Salariu Full Stack pentru dezvoltatori în India

Utilitate pentru barbotarea evenimentelor și captarea evenimentelor în JavaScript

În faza de barbotare a evenimentelor, sunt apelate numai evenimentele care au valoarea „falsă” (non-capturatoare). Event Bubbling și Event Capturing sunt aspecte importante ale DOM.

el.addEventListener('Click', ascultător, false) // ascultătorul nu captează
el.addEventListener('Click', ascultător) // ascultătorul nu captează

Codul de mai sus exemplifica modul în care funcționează fazele de barbotare și de captare. Fiecare eveniment nu atinge ținta. Unele evenimente nu sunt expuse și se opresc după faza țintă. Evenimentul bubble nu este aplicabil în toate tipurile de evenimente, iar ascultătorul ar trebui să aibă proprietatea booleană „.bubble” a obiectului evenimentului, pe lângă alte proprietăți, cum ar fi – e.target (pentru a face referire la ținta evenimentului) și e.eventPhase (ascultătorii actuali se înregistrează în acest mod).

Concluzie

Fluxul de evenimente în JavaScript are trei faze importante – faza de captare a evenimentelor, faza țintă și faza de bule de evenimente. Capturarea evenimentelor este prima care are loc, unde evenimentele sunt interceptate dacă este necesar. Aceasta este urmată de evenimentul care atinge ținta reală și faza finală este clocotită, când are loc răspunsul final la un eveniment. Astfel, se poate concluziona în mod adecvat că Event Bubbling și Event Capturing în JavaScript sunt bazele de care depind handlerul de evenimente și delegarea evenimentului.

Dacă sunteți interesat să aflați mai multe despre full-stack, consultați UpGrad & IIIT-B PG Diploma în Full-stack Software Development, care este concepută pentru profesioniști care lucrează și oferă peste 500 de ore de formare riguroasă, peste 9 proiecte și sarcini, IIIT- B Statutul de absolvenți, proiecte practice practice și asistență pentru locuri de muncă cu firme de top.

Aterizează la locul de muncă visat

UPGRAD SI DIPLOMA PG IN DEZVOLTARE DE SOFTWARE LUI IIIT-BANGALORE
Aflați mai multe @ upGrad