În această lecție vom cunoaște un astfel de concept ca apariția unui eveniment și, de asemenea, vom examina modul în care acesta poate fi întrerupt. În plus, vom afla ce alte etape (faze) trec evenimentul înainte de a începe să apară.
Event Float
Dacă un element are un eveniment, acesta începe să "plutească", adică apare de la părinte, apoi de la progenitor etc.
Din aceasta rezultă că evenimentul care a generat un element poate fi interceptat cu ajutorul unui manipulant de la părinte, progenitor etc.
Apariția evenimentului (bubble) este demonstrată în următorul exemplu:
Să scriem un mic script, cu care vom adăuga manipulatorul de evenimente "clic" pentru toate elementele de pagină, precum și pentru obiectele de document și de fereastră.
Cum să întrerupeți un eveniment plutitor
Puteți întrerupe evenimentul (bubble). În acest caz, elementele părinte (părinte), acest eveniment nu va fi cauzat. Metoda care este concepută pentru a opri ascensiunea unui eveniment (puroi) se numește stopPropagation ().
De exemplu, schimbați exemplul de mai sus, astfel încât evenimentul să nu plutească deasupra corpului.
Fără îndoială, ascensiunea este foarte convenabilă și arhitectural transparentă. Nu o opriți fără o nevoie clară.
Obținerea elementului care a sunat-o pe handler
De exemplu, la ieșirea în consola ID-ul elementul care a declanșat manipularea evenimentului:
Pentru a obține elementul curent, puteți utiliza și proprietatea curentăTarget (event.currentTarget).
Etapele (fazele) trecerii unui eveniment
Înainte ca evenimentul să înceapă să plutească (etapa de urcare), acesta pre-trece încă două etape:
- Etapa 1 este etapa de imersiune a elementului care a generat evenimentul. Ie În această etapă, există o mișcare de sus în jos, adică de la fereastra la element. De asemenea, această etapă este numită și faza de interceptare.
- Etapa 2 este etapa atingerii scopului, adică element (obiect) care a generat evenimentul.
Luând în considerare toate etapele la care are loc evenimentul, se obține următoarea imagine:
Să schimbați scenariul exemplului de mai sus, după cum urmează:
Al treilea parametru al metodelor addEventListener și removeEventListener determină stadiul la care va fi capturat evenimentul. Dacă acest parametru este setat la true. atunci evenimentul va fi interceptat în stadiul de imersiune (interceptare) a evenimentului. Și dacă parametrul este fals. atunci evenimentul va fi interceptat în stadiul ascensiunii. Pentru a gestiona evenimentul pe ținta în sine, puteți folosi metoda addEventListener cu valoarea false. și cu valoarea adevărată.
Obținerea elementului care a generat evenimentul
Pentru a obține elementul țintă, adică elementul care a generat evenimentul, trebuie să utilizați proprietatea țintă (event.target).
Luați în considerare exemplul de mai sus, în care modificăm conținutul elementului script la următoarele:
În acest exemplu, am adăugat modulul de procesare a evenimentului "clic" pentru elementul corpului. Acest handler va scoate la consola elementul care a numit handlerul și elementul care a generat evenimentul.
Să demonstram exemplul nostru făcând clic pe butonul stâng al mouse-ului în zona care aparține elementului puternic:
Articole similare
Trimiteți-le prietenilor: