,
A kezelők ugyanazok, mint korábban, de ezúttal - a merítési szakaszban. Nos, az elfogás működésének megtekintéséhez kattintson a benne lévő elemre.
A kezelők "felülről lefelé" sorrendben lőnek: FORM → DIV → P.
A JS kód itt a következő:
Var elemek = document.querySelectorAll ("form, div, p"); // akasszon le egy kezelőt minden elemhez az elfogási szakaszban a (var i = 0; i< elems.length; i++) {
elems[i].addEventListener("click", highlightThis, true);
}
Senki sem zavar, ha mindkét szakaszhoz kezelőket rendel, például:
Var elems = document.querySelectorAll ("form, div, p"); for (var i = 0; i< elems.length; i++) {
elems[i].addEventListener("click", highlightThis, true);
elems[i].addEventListener("click", highlightThis, false);
}
Kattintson a belső elemre
Az esemény sorrendjének megtekintéséhez:
Ez legyen FORM -> DIV -> P -> P -> DIV -> FORM. Vegye figyelembe, hogy az elem
Mindkét szakaszban részt vesz.
Eredmények
- Amikor egy esemény bekövetkezik - az elem, amelyen az esemény történt, esemény.targetként van megjelölve.
- Az esemény először a dokumentum gyökeréről az event.target -re lép, és meghívja az addEventListener (…., True) segítségével biztosított kezelőket.
- Az esemény az event.target elemről a dokumentum elejére kerül, miközben meghívja az addEventListener (…, hamis) kezelőket.
Minden kezelő hozzáférhet az esemény tulajdonságaihoz:
- event.target a legmélyebb elem, ahol az esemény ténylegesen megtörtént.
- event.currentTarget (= ez) - az az elem, amelyen az önkezelő pillanatnyilag kiváltotta (amelyhez az esemény "elérte").
- event.eventPhase - melyik fázisban váltották ki az eseménykezelőt (bemerítés = 1, buborékolás = 3).
A buborékolást meg lehet állítani az event.stopPropagation () metódus meghívásával, de nem ajánlott ezt megtenni, mivel szükség lehet az eseményre a legváratlanabb célokra.
Egy esemény lehallgatása
A nyelv egyik fontos jellemzője az események elfogása. Ha valaki például rákattint egy gombra, akkor az adott gombnak megfelelő onClick eseménykezelőt hívja meg. Az eseménykezelés segítségével biztosíthatja, hogy az ablakának, dokumentumának vagy rétegének megfelelő objektum még azelőtt elfogja és feldolgozza az eseményt, mielőtt az eseménykezelőt a megadott gomb objektuma meghívja erre a célra. Hasonlóképpen, az ablakban, dokumentumban vagy rétegben lévő objektum még azelőtt képes feldolgozni egy eseményjelet, mielőtt eléri a rendeltetési helyét.
Hogy lássuk, mire lehet ez hasznos, nézzük a következő példát:
Kattintson erre a linkre
Mint látható, a címkében nem adunk meg eseménykezelőket ... Ehelyett írunk
window.captureEvents (Event.CLICK);
az esemény lehallgatása érdekében Kattintson ablak objektum. Általában az ablakobjektum nem működik az eseménnyel Kattintson... Az elfogás után azonban átirányítjuk az ablak objektumra. Vegye figyelembe, hogy ben Esemény. KLIKK töredék KLIKK nagybetűvel kell írni. Ha több eseményt szeretne lehallgatni, akkor | szimbólumokkal válassza el őket egymástól. Például:
window.captureEvents (Event.CLICK | Event.MOVE);
Ezenkívül a funkcióban fogantyú () az eseménykezelő szerepkörébe rendeltünk, használjuk az utasítást return true;... Ez valójában azt jelenti, hogy a böngészőnek magát a linket kell feldolgoznia a funkció befejezése után. fogantyú ()... Ha helyette írsz hamis visszatérés; akkor minden véget ér.
Ha most a címkében
Ön határozza meg az eseménykezelőt kattintásra, akkor megérti, hogy ezt a programot nem hívják meg, amikor ez az esemény bekövetkezik. Ez nem meglepő, mivel az ablakobjektum még azelőtt elfogja az eseményjelet, mielőtt eléri a linkobjektumot. Ha definiál egy függvényt fogantyú () hogyan
funkció fogantyú (e) (
alert ("Az ablak objektum rögzítette ezt az eseményt!");
window.routeEvent (e);
return true;
}
akkor a számítógép ellenőrzi, hogy nincs -e más eseménykezelő definiálva ehhez az objektumhoz. Az e változó az Event objektumunk, amelyet argumentumként továbbítunk az eseménykezelő függvényhez.
Ezenkívül közvetlenül küldhet eseményjelet egy objektumnak. Ehhez használhatja a módszert handleEvent ()... Ez így néz ki:
Kattintson erre a linkre
onClick = "alert (" Eseménykezelő a második linkhez! ");"> Második link
A kattintási eseményekkel kapcsolatos minden jel a második linken keresztül kerül feldolgozásra - még akkor is, ha egyáltalán nem kattintott egyik linkre sem!
A következő parancsfájl bemutatja, hogyan reagálhat a parancsfájl a billentyűleütésekre. Kattintson egy kulcsra, és nézze meg, hogyan működik ez a szkript.
