Felszínre és elfogás

Felszínre biztosítja, hogy kattintson a belvízi

ok felvezető onclick (ha van) az első

. ezután elem

további tag
. és így tovább, egészen a láncot a szülő dokumentumot.

Felszínre és elfogás

Ezért, ha a fenti példában, kattintson a P. egymás kiírja éber. p → div → formában.

Ezt a folyamatot nevezik emelkedés. mivel az események „lebegnek” a belső tag keresztül felfelé a szülő, ugyanúgy, ahogy a légbuborék úszik a vízen.

Felugró szinte az összes eseményt.

A kulcsszó ebben a kifejezésben - „majdnem”.

Például egy focus esemény nem úszik. A későbbi fejezetekben fogunk megismerkedni részletesebben a különböző események és további példákat.

Bármilyen elem fogtunk Mindenesetre, akkor mindig megtudja, hogy pontosan hol történt.

A legmélyebb eleme, amely kiváltja az esemény az úgynevezett „cél” vagy „eredeti” elem, és elérhető event.target.

Különbségek ettől (= event.currentTarget):

  • event.target - ez a forrás elem. amelyen az esemény bekövetkezett emelkedés közben ő megváltoztathatatlan.
  • ez - ez a jelenlegi elem. amelyhez jött a felemelkedés, most végre a felvezető.

Például, ha csak egy processzor form.onclick. ő „fogott” minden kattintás belül a penész. Ahol kattintson belül - nem ugrik elem . amely kiváltotta a felvezető.

  • ez (= event.currentTarget) mindig maga a forma, mint a felvezető dolgoztak rajta.
  • event.target tartalmaz egy linket, hogy egy adott elem a formában, a legbelső, amelyben volt egy kattintással.

Ha az elem több processzor egyetlen, még ha a felmondás a felemelkedés ezek mind teljesülnek.

Azaz szerinti stopPropagation akadályozza az események tovább, de az összes processzor fog dolgozni az aktuális elem.

Annak érdekében, hogy állítsa le a folyamatot teljesen modern böngésző támogatja event.stopImmediatePropagation () metódust. Ez nem csak megakadályozza, hogy a felemelkedés, de leállítja a feldolgozást események az aktuális elem.

Ne hagyja abba a fortyogó nincs szükség!

Ascent - ez kényelmes. Ne hagyja abba anélkül, hogy a kifejezett igényeket, világos és átlátható építészet.

Gyakran a felmondás az emelkedés megteremti a maga buktatói, ami aztán meg kellett tennie.

  1. Tesszük menüben. Ez kezeli a kattintásokat annak elemei és teszi őket szerinti stopPropagation. Mint, minden működik.
  2. Később úgy döntöttünk, hogy figyelemmel kíséri az összes kattintást az ablakban néhány funkciót, például a statisztika - merre kattintott emberek. Például Yandeks.Metrika teszi ezt, beleértve a megfelelő opciót.
  3. A területre, ahol a kattintások elpusztulnak szerinti stopPropagation. Statisztika nem fog működni! Az eredmény egy „holt zóna”.

A probléma az, hogy megöli szerinti stopPropagation annak lehetőségét, hogy az esemény nyomon követésének felülről, és ez szükséges a megvalósításához valami „rendes”, hogy a menüben nincs kapcsolata egyáltalán.

A modern standard, kivéve a „emelkedés” az események, és több „merítés”.

Ez sokkal kisebb a kereslet, de néha, nagyon ritkán, ismereteket hasznos lehet.

Szigorúan véve, a standard azonosítja több mint három fokozatú esemény pass:

  1. Az esemény első megy fentről lefelé. Ez a szakasz az úgynevezett „lehallgatás színpad» (befogó szakasz).
  2. A rendezvény elérte a cél elemet. Ez - „színpadon célok» (target szakasz).
  3. Miután ez az esemény kezd kialakulni. Ez - „az emelkedési fázisban» (bugyborékoló szakasz).

Felszínre és elfogás

Vagyis, ha rákattint a TD esemény áthalad a lánc a szülők először le a tételt ( „süllyed”), majd a felső ( „durran”), a közúti kerékpározás rakodók.

Korábban beszéltünk csak a mászás, mert a másik szakaszban, mint általában, nem használják, és láthatatlanok számunkra.

Kezelők adunk végigvitt. -property, semmit sem tud a lehallgatás szakaszban kezdenek működni az emelkedés.

Elkapni a rendezvény a lehallgatás színpadon, akkor kell használni a harmadik argumentum addEventListener:

  • Ha igaz az érvelés. Az esemény lesz elfogott az úton lefelé.
  • Ha az argumentum hamis. Az esemény lesz fogott az emelkedés.

Lépés megjelölt célra ábrán számát (2). különösen nem kezelt, mint processzorok, által kijelölt mindkét módon is működik, a célsejten.

Vannak olyan események, amelyek nem jönnek fel, de lehet elfogott

Vannak olyan események, amelyek elkaphatják csak a lehallgatás színpad és a szakaszában a feljutás - nem ...

Például ilyen fókusz onfocus esemény egy elemet. Persze, ez nagyon ritka, az ilyen mentesség létezik történelmi okokból.

Az alábbi példában az .

.

ugyanazok a feldolgozók, mint korábban, de ezúttal - a színpadon merülés. Látni, hogy a lehallgatás akcióban, kattintson az elem benne

:

Kell FORMA → DIV → P → P → → DIV formában. Megjegyezzük, hogy az elem

részt vesz mindkét szakaszban.

Amint látható a példa, ugyanaz a processzor lehet rendelni különböző szakaszaiban. Ebben az esetben száma a jelenlegi szakaszban, ha szükséges, lehet beszerezni a tulajdonságok event.eventPhase (= 1, ha merülő 3, ha az emelkedés).

Hogy könnyebb navigálni, szedtem IE8- különbségeket, amelyek kapcsolódnak a felemelkedés egy részbe.

Tudásuk lesz szükség, ha úgy dönt, hogy írjon tiszta JS, váz nélkül, és meg kell IE8- támogatást.

Nem tulajdonságok event.currentTarget

Megjegyezzük, hogy ha kijelöli a felvezető keresztül onsvoystvo van ez. így event.currentTarget. Általános szabály, hogy nem szükséges, de a találkozó révén attachEvent felvezető nem kapja meg. úgy, hogy az aktuális elem, ha szükséges, lehet venni csak a bezárást.

Ehelyett event.target a IE8- használt event.srcElement

Ha írunk egy kezelőt, amely támogatja és IE8- és modern böngésző, akkor indítsa el az alábbiak szerint:

Megállítani az emelkedési használt kód event.cancelBubble = true.

Határon böngésző megállítani a feljutás, akkor:

Később a bemutató, akkor a szabványos tulajdonságokkal és kihívások, mivel a hozzáadott ezeket a sorokat a kompatibilitás biztosítása érdekében - egy meglehetősen egyszerű és egyértelmű feladat. Ezen kívül, senki sem zavar, hogy csatlakozni polifill.

Ismét szeretném megjegyezni - ezek a különbségek kell tudni írásakor JS-kód engedélyezve IE8- keret nélkül. Szinte minden JS-keret arról böngészőtámogatások megcélozni. currentTarget és szerinti stopPropagation ().

  • Amikor egy esemény bekövetkezik - az elem, amelyre jelölték „target» (event.target).
  • Következő esemény költöztek le a gyökere a dokumentum event.target. az út mentén okozó rakodók tegye át addEventListener (. igaz).
  • Ezután az esemény mozog event.target fel a dokumentum gyökér, az út ami a rakodók tegye át a * és addEventListener (. False).

Minden processzor hozzáfér esemény tulajdonságok:

  • event.target - a legmélyebb eleme, amelyen az esemény bekövetkezett.
  • event.currentTarget (= ez) - elem, amely abban a pillanatban terhelés felvezető (amelyre „úszik” esemény).
  • event.eventPhase - milyen fázisban működött (= 1 merülés, emelkedjen = 3).

Bármilyen processzor tudja megállítani az esemény hívja event.stopPropagation (). de ez nem ajánlott, mert a jövőben ez az esemény szüksége lehet, néha a legváratlanabb dolgok.

A jelenlegi fejlődési szakaszában merítés nagyon ritkán.

Ennek két oka van:

Történelmi - mivel IE 9-es verzió csak a teljes mértékben támogatja a jelenlegi szabvány.

Ésszerű - amikor egy esemény bekövetkezik, akkor indokolt, hogy az elsődleges feldolgozó a munkát elem, mert ez a legkonkrétabb. A kód kerül a processzor elem, tudja, hogy a maximális részleteket arról, hogy milyen elem, hogy mit csinál.

Továbbá érdemes átadni a feldolgozás az esemény a szülő - azt is megérti, hogy mi történik, de kevésbé részletesen, stb - a fent és így tovább, amíg a dokumentum. processzor, amely végrehajtja a leggyakoribb dokumentum szintű funkcionalitást.