Suprafața și interceptarea evenimentelor

Toate paginile de internet constau din elemente separate (etichete). Când pagina este afișată, browserul creează un arbore DOM. Aceasta reflectă structura documentului (relația dintre elementele părintelui și copilului).







În modelul DOM, fiecare element copil face parte din elementul părinte. Prin urmare, dacă apare un eveniment pe un element (de exemplu, faceți clic cu mouse-ul), el apare și pe părintele acestuia și așa mai departe, pe copacul DOM până la elementul rădăcină (obiectul documentului). Dacă mai multe dintre aceste elemente sunt atribuite manipulatoare de evenimente, atunci toate acestea vor fi executate.

În exemplul de mai jos, faceți clic pe element va apela handlerul onclick și elementul părinte

.

MARK în interiorul DIV

Etapele de procesare a evenimentelor

Pentru a afla în ce ordine vor fi executați persoanele care au de lucru, trebuie să aveți o idee despre modul în care browserul gestionează evenimentul.

Evenimentul original pentru toți utilizatorii este generic. Prelucrarea sa este împărțită în trei etape:

Elementul asupra căruia are loc evenimentul este denumit țintă.

Interceptarea fazei

Când are loc un eveniment, browserul trece alternativ din elementul de sus al arborelui DOM (document) în jos prin toate elementele intermediare către țintă. Această etapă de procesare se numește etapa de interceptare. Manipulatorii sunt porniți înainte ca evenimentul să atingă elementul țintă. Evenimentul a fost interceptat. De aici vine numele etapei.







Manipulatoarele de evenimente sunt executate numai dacă sunt specificate pentru execuție în etapa de interceptare. Pentru a face acest lucru, trebuie să utilizați valoarea adevărată pentru al treilea atribut al metodei addEventListener (). Aceasta este singura modalitate de a utiliza dispozitivul de manipulare în stadiul de interceptare.

Faza de interceptare este folosită foarte rar, dar uneori poate fi utilă.

Etapa obiectivului

După ce evenimentul a coborât la elementul țintă, faza de interceptare este finalizată, iar executanții pentru elementul țintă sunt executați. Aceasta este a doua etapă - stadiul scopului. Ordinea de execuție a manipulatorilor pe elementul țintă depinde numai de ordinea destinației lor. Utilizarea celui de-al treilea argument pentru metoda addEventListener () nu are niciun efect asupra ordinii în care a fost rulat.

Stadiul ascensiunii

Apoi începe ultima etapă. Evenimentul trece unul câte unul de la elementul țintă prin lanțul părinte la elementul rădăcină al documentului. Evenimentul avansează copacul DOM. Se pare că apare. De aici și numele - stadiul ascensiunii.

În acest stadiu, toți ceilalți manipulatori sunt executați. Handlerele care sunt atribuite utilizând atributele evenimentului și proprietățile DOM sunt întotdeauna efectuate în stadiul ascensiunii. În metoda addEventListener (), puteți să omiteți pur și simplu al treilea argument pentru a utiliza etapa ascensiunii.

Trecerea tuturor etapelor este demonstrată în exemplul de mai jos (este lansat făcând clic pe elementul galben):

Elemente de manipulare a elementelor