Az események lefedése és lehallgatása

Minden internetes oldal különálló elemeket (címkéket) tartalmaz. Amikor megjelenik az oldal, a böngésző létrehoz egy DOM-fát. Tükrözi a dokumentum szerkezetét (a szülő és a gyermek elemei közötti kapcsolatot).

A DOM modellben minden gyermekelem a szülőelem része. Ezért, ha egy esemény történik egy elemen (például kattintson egy egérrel), akkor a szülőn is megjelenik, és így a DOM-fa a gyökérelemhez (a dokumentumobjektumhoz). Ha ezen elemek közül több is ki van rendezve eseménykezelő, akkor mindegyik végrehajtásra kerül.

Az alábbi példában kattintson az elemre hívja az onclick kezelőt és a szülőelemet

.

MARK belül DIV

Eseményfeldolgozási szakaszok

Annak tudatában, hogy a kezelők melyik sorrendben kerülnek végrehajtásra, meg kell adnunk egy elképzelést arról, hogy a böngésző hogyan kezeli az eseményt.

Az eredeti esemény minden kezelő számára általános. A feldolgozás három szakaszra oszlik:

Az elem, amelyen az esemény bekövetkezik, a cél.

Lehallgatási szakasz

Amikor egy esemény bekövetkezik, a böngésző felváltva átmegy a DOM-fa (dokumentum) felső eleméből a cél összes közbenső elemére. Ezt a feldolgozási fázist a lehallgatási szakasznak nevezik. A kezelők elindulnak, mielőtt az esemény elérné a célelemet. Esemény, ahogy elfogták. Ebből következik a színpad neve.

Az eseménykezelőket csak akkor hajtják végre, ha azok a lehallgatási szakaszban vannak végrehajtva. Ehhez az addEventListener () metódus harmadik attribútumának értékét kell használni. Ez az egyetlen módja annak, hogy a kezelőt a lehallgatási szakaszban használják.

A lekérdezési fázist nagyon ritkán használják, de néha hasznos lehet.

A cél színpadán

Miután az esemény leereszkedett a célelemre, a lekérdezési szakasz befejeződik, és a célelem kezelői végrehajtásra kerülnek. Ez a második szakasz - a cél színvonala. A célelemek kezelőinek végrehajtási sorrendje csak a rendeltetési sorrendtől függ. A harmadik argumentumnak a addEventListener () módszerrel való használata nem befolyásolja a rendezést.

Felszálló szakasz

Ezután kezdődik az utolsó szakasz. Az esemény egyenként megy át a célelemről a szülő láncon keresztül a dokumentum gyökérelemére. Az esemény előidézi a DOM fát. Úgy tűnik, felbukkan. Ezért a név - az emelkedési szakasz.

Ebben a szakaszban minden más kezelő végrehajtásra kerül. Az eseménytulajdonságokkal és DOM tulajdonságokkal rendelt kezelők mindig a felemelkedési szakaszban kerülnek végrehajtásra. A addEventListener () metódusban egyszerűen elhagyhatja a harmadik argumentumot az emelkedési fokozat használatához.

Az alábbiakban bemutatjuk az összes szakasz átjárását (a sárga elemre kattintva indítható el):

Elem kezelő