Esemény előugró és eseményfelvétel

előző ◈ a következő

Esemény felszíne. Amikor egy esemény bekövetkezik, a kezelők először a legösszetettebb elemen dolgoznak, majd a szülőjén, majd magasabbra, és így tovább a fészkelő láncra. event.stopImmediatePropagation ()

Amikor egy esemény bekövetkezik, a kezelők először a legösszetettebb elemen dolgoznak, majd a szülőjén, majd magasabbra, és így tovább a fészkelő láncra.

Például 3 beágyazott FORM elem> DIV> P. egy kezelővel mindegyiken:

kód:

A felületkezelés biztosítja, hogy kattintson a belsőre

hívja az onclick kezelőt (ha van) először a

, majd az elemen

tovább egy elemen

, és így tovább a szülők láncolatát a dokumentumhoz.

Ezért ha a fenti példában a P gombra kattintasz, akkor értesítsd a következőt: p → div → űrlap.

Ezt a folyamatot nevezzük felemelkedésnek, mert az események a "belső" elemből a szülőkön keresztül "úsznak", ahogyan a vízben lévő levegő buborék felborul.

event.target

Akármelyik elemet, amit elkapunk, mindig tudhatjuk meg pontosan, hol történt.
A legmélyebb elem, amely az eseményt kiváltja, "cél" vagy "forrás" elemnek nevezik, és event.targetként is elérhető.

Eltérések ettől (= event.currentTarget):

event.target az eredeti elem, amelyen az esemény bekövetkezett, változatlan a felemelés során.
ez a jelenlegi elem, amely elérte az emelkedést, rajta a kezelő most végrehajtásra kerül.

Például, ha csak egy form.onclick kezelő van, akkor "elkapja" az összes űrlapon belüli kattintást. Bárhol is van egy kattintás, megjelenik az elem , amelyen a kezelő működni fog.

ez (= event.currentTarget) mindig az űrlap lesz, mivel a kezelő rajta dolgozott.
Az event.target linket tartalmaz az adott űrlapon belüli elemhez, a leginkább beágyazott elemhez, amelyen a kattintás történt.

A helyzet akkor is lehetséges, ha az event.target és ez ugyanaz az elem, például ha nincs más címke az űrlapon, és a kattintás az elemen volt .

Állítsa le az eseményemelkedést

A felületkezelés egyenesen felfelé halad. Általában az esemény felbukkan és felfelé, egészen az elemig . majd dokumentálni. és néha az ablakhoz is. felhívva az összes kezelőt úton.

De bármelyik közbenső kezelő eldöntheti, hogy az esemény teljesen feldolgozott, és megállítja a felemelkedést.

Az emelkedés megállításához hívja fel az event.stopPropagation () metódust.

Itt például, ha rákattint a gombra, a body.onclick kezelő nem működik:

kód:

Esemény lehallgatása. event.stopImmediatePropagation # 40; # 41;

Ha egy elemnek több kezelője van egy eseményhez, akkor is, ha az emelkedés megáll, akkor mindegyik végrehajtásra kerül.

Vagyis a stopPropagation megakadályozza, hogy az esemény továbbhaladjon, de az aktuális elemen minden kezelő működni fog.

A feldolgozás teljes leállítása érdekében a modern böngészők támogatják az event.stopImmediatePropagation () metódust. Ez nemcsak megakadályozza az emelkedést, hanem leállítja az események feldolgozását az aktuális elemen.

Az IE8-

A navigálás megkönnyítése érdekében összegyűjtöttem az IE8-különbségeket, amelyek az emelkedéshez kapcsolódnak.

Tudásukra van szükség, ha úgy dönt, hogy tiszta JS-re ír, keret nélkül, és szüksége lesz IE8 támogatásra.

Nincs esemény.currentTarget tulajdonság.

Ne feledje, hogy amikor hozzárendel egy kezelőt a tulajdonon keresztül, akkor ezt megkapjuk. ezért event.currentTarget. általában nem szükséges, és itt a megbízáson keresztül a kezelő nem kapja meg ezt. hogy az aktuális elemet, ha szükséges, csak a lezárásból vegye fel.

Az IE.-ban az event.target helyett az event.srcElementet használjuk

Ha olyan kezelőt írunk, amely mind az IE8-at, mind pedig a modern böngészőket támogatja, így elindíthatjuk:

Kód: elem.onclick = függvény (esemény) esemény = esemény || window.event;
var target = event.target || event.srcElement;

//. most van egy esemény objektum és cél
.
>

Az emelkedés megállításához használja a kódot event.cancelBubble = true

A keresztböngésző segítségével megállíthatja az emelkedést:

Kód: event.stopPropagation. event.stopPropagation (). (event.cancelBubble = true);

Esemény bekövetkezésekor az elem, amelyen történt, "cél" (event.target).
Ezután az esemény először lefelé halad a dokumentumgyökérről az event.targetre, és felhívja a kezelőket a addEventListener (. True) segítségével.
Ezután az esemény az event.target-ből a dokumentum gyökéréig mozog, és felhívja a kezelőket a * és a addEventListener (. False) szolgáltatáson keresztül.

Az event.target a legmélyebb elem, amelyen az esemény bekövetkezett.
event.currentTarget (= ez) az a elem, amelyen a kezelő éppen dolgozik (amelyhez az esemény "úszott").
event.eventPhase - melyik fázisban dolgozott (merülés = 1, emelkedés = 3).

Kapcsolódó cikkek

előző ◈ a következő