Eveniment pop-up și captură de eveniment

Evenimentul. Când apare un eveniment, manipulatorii lucrează mai întâi la cel mai imbricat element, apoi pe părintele său, apoi mai sus și așa mai departe, până la lanțul de cuibărit. event.stopImmediatePropagation ()

Când apare un eveniment, manipulatorii lucrează mai întâi la cel mai imbricat element, apoi pe părintele său, apoi mai sus și așa mai departe, până la lanțul de cuibărit.

De exemplu, există 3 elemente imbricate FORM> DIV> P. cu un handler pe fiecare:

cod:

FORMULAR
DIV

P



Suprafața asigură un clic pe elementul intern

va apela primul handler onclick (dacă este cazul) pe

, apoi pe element

mai departe pe un element
, și așa mai departe lanțul de părinți la documentul în sine.

Prin urmare, dacă faceți clic pe P în exemplul de mai sus, atunci alerta: p → div → formularul este afișat succesiv.

Acest proces se numește ascensiune, deoarece evenimentele "plutesc" de la elementul interior prin părinți, la fel cum un balon de aer în apă plutește în sus.

event.target

Indiferent de elementul pe care îl prindem, puteți afla întotdeauna exact unde sa întâmplat.
Cel mai adânc element care declanșează evenimentul este denumit elementul "țintă" sau "sursă" și este disponibil ca eveniment target.

Diferențe față de aceasta (= event.currentTarget):

  • event.target este elementul original pe care sa produs evenimentul, este neschimbat în timpul ascensiunii.
  • acesta este elementul curent, care a ajuns la urcare, pe care manipulatorul este executat acum.

De exemplu, dacă există doar un singur formular, faceți clic pe toate clicurile din interiorul formularului. Ori de câte ori există un clic înăuntru, acesta apare până la element , pe care manipulatorul va funcționa.

  • acest lucru (= event.currentTarget) va fi întotdeauna forma în sine, deoarece manipulatorul a lucrat la ea.
  • event.target va conține un link către elementul specific din interiorul formularului, cel mai imbricat, pe care a apărut clicul.

O situație este posibilă și atunci când event.target și acesta este același element, de exemplu dacă nu există alte etichete în formular și clicul a fost pe elementul în sine .

Opriți ascensiunea evenimentului

Suprafața merge direct în sus. De obicei, evenimentul va apărea și se va ridica, până la element . și apoi să documenteze. și uneori până la fereastră. chemându-i pe toți muncitorii în drumul lor.

Dar orice manipulator intermediar poate decide că evenimentul este procesat complet și oprește ascensiunea.

Pentru a opri ascensiunea, apelați metoda event.stopPropagation ().

De exemplu, aici, când faceți clic pe buton, instrumentul hand.onclick nu funcționează:

cod:

Interceptarea unui eveniment. event.stopImmediatePropagation # 40; # 41;

Dacă un element are mai mulți manipulatori pentru un eveniment, atunci chiar dacă ascensiunea se oprește, toate vor fi executate.

Asta este, stopPropagation împiedică evenimentul să avanseze, dar pe elementul curent toate lucrătorii vor funcționa.

Pentru a opri complet procesarea, browserele moderne acceptă metoda event.stopImmediatePropagation (). Nu numai că împiedică urcarea, dar și oprește procesarea evenimentelor pe elementul curent.

Diferențele dintre IE8-

Pentru a facilita navigarea, am colectat IE8- diferențele care sunt legate de ascensiune într-o singură secțiune.

Cunoștințele lor sunt necesare dacă decideți să scrieți pe JS pur, fără cadre și veți avea nevoie de suport IE8.

Nu există nici o proprietate event.currentTarget.

Rețineți că atunci când atribuim un handler prin intermediul unei proprietăți, avem acest lucru. prin urmare, event.currentTarget. ca regulă, nu este necesar, iar aici, la alocare prin atașament, manipulatorul nu primește acest lucru. astfel încât elementul curent, dacă este necesar, să poată fi luat numai de la închidere.

În loc de eveniment.target în IE8-, utilizați event.srcElement

Dacă scriem un handler care să suporte atât browserele IE8, cât și browserele moderne, putem începe astfel:

Cod: elem.onclick = funcție (eveniment) event = eveniment || window.event;
var țintă = event.target || event.srcElement;

//. acum avem un obiect de eveniment și o țintă
.
>

Pentru a opri ascensiunea, folosiți codul event.cancelBubble = true

Puteți să vă opriți ascensiunea:

Cod: event.stopPropagation. event.stopPropagation (). (event.cancelBubble = true);

  • Când apare un eveniment, elementul care a apărut este marcat ca "țintă" (event.target).
  • Apoi, evenimentul se deplasează mai întâi de la rădăcina documentului la eveniment.target, sunând la manageri livrați prin addEventListener (. True).
  • Apoi, evenimentul se mișcă de la eveniment.target până la rădăcina documentului, sunând agenți care au fost difuzați prin * și addEventListener (.False).
  • event.target este cel mai adânc element pe care sa produs evenimentul.
  • event.currentTarget (= aceasta) este elementul pe care manipulatorul a lucrat în acest moment (la care evenimentul a fost "înotat").
  • event.eventPhase - în ce fază a funcționat (scufundare = 1, ascensiune = 3).
  • Eveniment pop-up și captură de eveniment
  • Eveniment pop-up și captură de eveniment
  • Eveniment pop-up și captură de eveniment
  • Eveniment pop-up și captură de eveniment

    Articole similare

    Pagina anterioară

    Pagina următoare