,
Manevrele sunt la fel ca înainte, dar de data aceasta - în etapa de imersiune. Ei bine, pentru a vedea interceptarea în acțiune, faceți clic pe elementul din ea.
Manipulatorii vor declanșa în ordinea „de sus în jos”: FORM → DIV → P.
Codul JS aici este astfel:
Var elems = document.querySelectorAll ("form, div, p"); // închideți un handler pentru fiecare element în etapa de interceptare pentru (var i = 0; i< elems.length; i++) {
elems[i].addEventListener("click", highlightThis, true);
}
Nimeni nu te deranjează să atribui handler pentru ambele etape, astfel:
Var elems = document.querySelectorAll ("form, div, p"); pentru (var i = 0; i< elems.length; i++) {
elems[i].addEventListener("click", highlightThis, true);
elems[i].addEventListener("click", highlightThis, false);
}
Faceți clic pe elementul interior
Pentru a vedea ordinea evenimentului:
Ar trebui să fie FORM -> DIV -> P -> P -> DIV -> FORM. Rețineți că elementul
Va participa la ambele etape.
Rezultate
- Când apare un eveniment - elementul pe care s-a produs evenimentul este marcat ca eveniment.target.
- Evenimentul călătorește mai întâi de la rădăcina documentului la event.target, invocând de-a lungul drumului handler-urile furnizate prin addEventListener (…., True).
- Evenimentul se deplasează de la event.target până la începutul documentului, de-a lungul modului în care apelează gestionarele furnizate prin addEventListener (…., False).
Fiecare handler va avea acces la proprietățile evenimentului:
- event.target este cel mai profund element în care evenimentul s-a întâmplat de fapt.
- event.currentTarget (= this) - elementul pe care auto-handler-ul a declanșat-o în momentul respectiv (la care evenimentul a „atins”).
- event.eventPhase - în care fază a fost declanșat gestionarul de evenimente (imersiune = 1, barbotare = 3).
Clocotirea poate fi oprită apelând metoda event.stopPropagation (), dar nu este recomandat să faceți acest lucru, deoarece este posibil să aveți nevoie de eveniment în cele mai neașteptate scopuri.
Interceptarea unui eveniment
Una dintre caracteristicile importante ale limbajului este interceptarea evenimentelor. Dacă cineva, de exemplu, face clic pe un buton, se apelează gestionarul de evenimente onClick corespunzător acelui buton. Cu ajutorul gestionării evenimentelor, vă puteți asigura că obiectul corespunzător ferestrei, documentului sau stratului dvs. interceptează și procesează evenimentul chiar înainte ca gestionarul de evenimente să fie chemat de obiectul butonului specificat în acest scop. La fel, un obiect din fereastra, documentul sau stratul dvs. poate procesa un semnal de eveniment chiar înainte de a ajunge la destinația normală.
Pentru a vedea pentru ce poate fi util acest lucru, să ne uităm la următorul exemplu:
Faceți clic pe acest link
După cum puteți vedea, nu specificăm programe de gestionare a evenimentelor în etichetă ... În schimb, scriem
window.captureEvents (Event.CLICK);
pentru a intercepta evenimentul Clic obiect fereastră. De obicei obiectul fereastră nu funcționează cu evenimentul Clic... Cu toate acestea, după interceptare, îl redirecționăm apoi către obiectul fereastră. Rețineți că în Eveniment.CLICK fragment CLIC trebuie să fie scrise cu majuscule. Dacă doriți să interceptați mai multe evenimente, atunci ar trebui să le separați unul de celălalt prin simboluri |. De exemplu:
window.captureEvents (Event.CLICK | Event.MOVE);
În plus, în funcție mâner () atribuit de noi rolului de gestionare a evenimentelor, folosim instrucțiunea întoarce-te adevărat;... Ceea ce înseamnă cu adevărat acest lucru este că browserul trebuie să proceseze linkul în sine după ce funcția se termină. mâner ()... Dacă scrii în schimb returnează fals; atunci totul se va termina acolo.
Dacă acum în etichetă
Veți defini gestionarul de evenimente onClick, veți înțelege că acest program nu va fi apelat atunci când apare acest eveniment. Acest lucru nu este surprinzător, deoarece obiectul fereastră interceptează semnalul evenimentului chiar înainte de a ajunge la obiectul de legătură. Dacă definiți o funcție mâner () Cum
mâner funcție (e) (
alert ("Obiectul ferestrei a capturat acest eveniment!");
window.routeEvent (e);
întoarce-te adevărat;
}
atunci computerul va verifica dacă au fost definite alte gestionare de evenimente pentru acest obiect. Variabila e este obiectul nostru Eveniment, care este transmis funcției de gestionare a evenimentelor ca argument.
În plus, puteți trimite direct un semnal de eveniment către un obiect. Pentru a face acest lucru, puteți utiliza metoda handleEvent ()... Arată așa:
Faceți clic pe acest link
onClick = "alert (" Handler de evenimente pentru al doilea link! ");"> Al doilea link
Toate semnalele despre evenimentele Click sunt trimise spre procesare prin intermediul celui de-al doilea link - chiar dacă nu ați făcut clic pe niciun link!
Următorul script demonstrează modul în care scriptul dvs. poate răspunde la semnalele de tastare. Faceți clic pe o tastă și vedeți cum funcționează acest script.
