Surfacing și interceptarea

Surfacing asigură click pe interior

Cauza handler onClick (dacă există) pe primul

. atunci elementul

membru în continuare

. și așa mai departe până lanțul de la documentul de bază.

Prin urmare, dacă în exemplul de mai sus, faceți clic pe secvențial P. ar afișa alerte. p → div → formular.

Acest proces se numește ascensiune. pentru că evenimentele „plutească“ pe elementul interior în sus prin mamă, la fel ca o bulă de aer plutește în apă.

Pop-up aproape toate evenimentele.

Cuvântul cheie în această frază - „aproape“.

De exemplu, un eveniment de focalizare nu plutește. În capitolele următoare, vom face cunoștință în detaliu cu diferitele evenimente și a vedea mai multe exemple.

La orice element de am prins orice caz, puteți găsi întotdeauna unde sa întâmplat.

Cel mai profund element care declanșează evenimentul este numit un „țintă“ sau element de „original“ și este disponibil ca event.target.

Diferentele fata de aceasta (= event.currentTarget):

event.target - acesta este elementul sursă. pe care evenimentul a avut loc în timpul ascensiunii este de neschimbat.
acest lucru - acesta este elementul curent. la care a venit de ascensiune, acum se realizează pe handler.

De exemplu, în cazul în care există doar un singur procesor form.onclick. el a „prins“ toate clicurile din interiorul matriței. Ori de câte ori faceți clic în interiorul - acesta apare elementul . care a declanșat handler.

acest lucru (= event.currentTarget) va fi întotdeauna forma în sine ca un handler lucrat la ea.
event.target va conține un link către un element specific în formă, cel mai intim, în care a existat un clic.

Dacă elementul are mai multe procesoare pe un singur eveniment, chiar dacă încetarea de ascensiune toate acestea vor fi îndeplinite.

Adică, stopPropagation împiedică progresul evenimentelor în continuare, dar toate procesoarele vor lucra pe elementul curent.

Pentru a opri procesul complet, browserele moderne event.stopImmediatePropagation metoda () susține. Nu numai că previne ascensiunea, dar se oprește evenimentele de prelucrare pe elementul curent.

Nu te opri barbotare nu este nevoie!

Ascent - este convenabil. Nu-l opriți, fără a nevoilor explicite, arhitectura clare și transparente.

De multe ori încetarea de ascensiune creează propriile sale capcane, care apoi a trebuit să facă.

Noi facem meniu. Acesta se ocupă de clicuri pe elementele sale și le face stopPropagation. Cum ar fi, totul funcționează.
Mai târziu, am decis să monitorizeze toate clicurile din fereastra pentru o parte din funcționalitatea sa, de exemplu, pentru statistici - De unde am făcut clic oameni. De exemplu, Yandeks.Metrika face acest lucru prin includerea opțiunea corespunzătoare.
De-a lungul zona în care clicurile sunt ucise stopPropagation. Statisticile nu va funcționa! Rezultatul a fost o „zonă moartă.“

Problema este că stopPropagation ucide orice posibilitate de a urmări evenimentul de mai sus, și este necesară pentru realizarea ceva „obișnuit“, că meniul nu are nici o relație, la toate.

În standard modernă, cu excepția „ascensiune“ a evenimentelor, și să ofere mai mult „imersiune“.

Este mult mai puțin cerere, dar uneori, foarte rar, cunoștințe cu privire la aceasta poate fi de ajutor.

Strict vorbind, standardul identifică evenimentul cât mai multe trei etape trec:

Evenimentul merge mai întâi de sus în jos. Această etapă se numește „etapa de interceptare» (etapa captarea).
Evenimentul a ajuns la elementul țintă. Acest lucru - „obiective etapa» (etapa țintă).
După acest eveniment începe să apară. Aceasta - „, a (faza de barbotare) etapa ascensiune».

Adică, atunci când faceți clic pe evenimentul TD călătorește prin lanțul de părinți în primul rând în jos la elementul ( „chiuvete“), și apoi la partea de sus ( „POP“), pe manipulatorii de ciclism rutier.

Anterior, am vorbit doar despre ascensiune, deoarece cealaltă scenă, de regulă, nu sunt utilizate și sunt invizibile pentru noi.

Manipulatorii sunt adăugate prin intermediul pe. -property, nu știu nimic despre stadiul de interceptare și să înceapă să lucreze cu ascensiune.

Pentru a prinde evenimentul pe scena de interceptare, trebuie să utilizați al treilea argument pentru a addEventListener:

Dacă adevărat argument. evenimentul va fi interceptate pe drum în jos.
Dacă argumentul este fals. evenimentul va fi prins pentru ascensiune.

Scopul pas este indicat în figura numărul (2). mai ales nu sunt tratate ca procesoare, desemnate de ambele moduri, de asemenea, funcționează pe celula țintă.

Există evenimente care nu vin, dar care pot fi interceptate

Există evenimente care pot fi capturate doar în faza de interceptare și în etapa de ascensiune - nu ...

De exemplu, un astfel de eveniment se concentreze onfocus pe un element. Desigur, este foarte rar, există o astfel de scutire pentru motive istorice.

In exemplul de mai jos .

sunt aceleași procesoare ca înainte, dar de data aceasta - de la scufundare etapă. Pentru a vedea interceptarea în acțiune, faceți clic pe elementul în ea

Ar trebui să fie FORMULAR → DIV → P → P → DIV → FORMULAR. Rețineți că elementul

implicate în ambele etape.

După cum se poate observa din exemplul, același procesor poate fi atribuit diferitelor etape. În acest caz, număr de stadiul actual, dacă este necesar, pot fi obținute din proprietățile event.eventPhase (= 1 dacă hidrotermic 3, în cazul în ascensiune).

Pentru a face mai ușor de navigat, am adunat IE8- diferențele care sunt legate de ascensiunea într-o singură secțiune.

Cunoștințele lor vor fi necesare în cazul în care vă decideți să scrie pe JS pură, fără cadru, și ai nevoie de sprijin IE8-.

Nu există proprietăți event.currentTarget

Rețineți că, atunci când atribuirea unui handler prin onsvoystvo avem acest lucru. asa event.currentTarget. De regulă, nu este necesar, dar numirea prin handler attachEvent nu obține acest lucru. astfel încât elementul curent, dacă este necesar, poate fi luată numai de la închidere.

În schimb event.target în IE8- utilizate event.srcElement

Dacă vom scrie un handler care va sprijini și IE8- și browserele moderne, puteți începe după cum urmează:

Pentru a opri ascensiunea folosit codul event.cancelBubble = true.

Cross-browser pentru a opri ascensiunea, puteți:

Mai târziu, în tutorial, vom folosi proprietățile și provocările standard, deoarece adăugarea acestor linii pentru a asigura compatibilitatea - o sarcină destul de simplu și evident. În plus, nimeni nu deranjează să se conecteze polifill.

Încă o dată, aș dori să rețineți - aceste diferențe trebuie să știe atunci când scrieți JS-code-ului IE8- fără cadre. Aproape toate JS-cadre oferă cross-browser de sprijin pentru a viza. currentTarget și stopPropagation ().

Atunci când are loc un eveniment - elementul pe care a fost marcat ca „țintă» (event.target).
Urmatorul eveniment este deplasat mai întâi în jos din rădăcina documentului la event.target. de-a lungul drum care cauzează handlerele puse prin addEventListener (. adevărat).
În continuare, evenimentul se mută de la event.target până la rădăcina documentului, calea care cauzează handlerele puse prin * și pe addEventListener (. Fals).

Fiecare procesor are acces la proprietăți de evenimente:

event.target - cel mai adânc element pentru care a avut loc evenimentul.
event.currentTarget (= aceasta) - element care, la momentul handler sarcinii (la care "înota" eveniment).
event.eventPhase - în ce fază a mers (= 1 scufundare, urca = 3).

Orice procesor poate opri evenimentul prin apelarea event.stopPropagation (). dar acest lucru nu este recomandat, deoarece, în viitor, acest eveniment ar putea avea nevoie de, uneori lucrurile cele mai neașteptate.

În stadiul actual de dezvoltare a imersiune este folosit foarte rar.

Există două motive:

Istoric - din moment ce versiunea IE 9 acceptă numai pe deplin standardul actual.

Rezonabil - atunci când are loc un eveniment, este rezonabil să se permită primului operator la elementul de lucru, deoarece acesta este cel mai specific. Codul care este plasat pe elementul de procesor, știe maxim de detalii cu privire la ce fel de element de ceea ce făcea.

În plus, este logic să transfere procesarea evenimentului către părinte - el înțelege, de asemenea, ceea ce se întâmplă, dar în mai puține detalii, etc - de mai sus, și așa mai departe, până la documentului. procesor care implementează funcționalitatea cel mai frecvent la nivel de document.