Javascript - felszíni esemény, séf
Ebben a leckében megismerjük egy olyan koncepciót, mint egy esemény megjelenése, és megvizsgáljuk, hogyan lehet megszakítani. Ezenkívül megtudhatjuk, hogy az esemény melyik más szakaszai (fázisai) elhaladnak mielőtt elkezdenék felszínre lépni.
Esemény Float
Ha egy elemnek van egy eseménye, elkezd "lebegni", azaz. a szülő, majd a progenitor stb.
Ebből következik, hogy az esemény, amely valamilyen elemet generált, a szülő, a progenitor stb. Kezelője segítségével lehallgatható.
Az esemény (buborék) kialakulását az alábbi példában mutatjuk be:
Írjunk egy kis szkriptet, amellyel hozzáadjuk a "click" eseménykezelőt minden oldalelemhez, valamint dokumentum- és ablakobjektumhoz.
Lebegő esemény megszakítása
Megszakíthatja az eseményt (buborék). Ebben az esetben a szülő (szülő) elemek nem okozzák ezt az eseményt. Az esemény (folyadék) emelkedését megállítani kívánt módszert stopPropagation () -nek nevezik.
Például változtassa meg a fenti példát, hogy az esemény ne lebegjön a test felett.
Kétségtelen, hogy az emelkedés nagyon kényelmes és építészetileg átlátható. Ne hagyja abba anélkül, hogy világos szükség lenne rá.
Az elemet, amely a kezelőt hívta
Például a konzolon lévő kimenet az elemkezelőt kiváltó elemet azonosítja:
Az aktuális elem lekéréséhez használhatja az currentTarget tulajdonságot (event.currentTarget).
Egy esemény áthaladásának szakaszai (fázisai)
Mielőtt az esemény lebegni kezd (a felemelkedési fokozatot), előtte még két lépést:
- Az 1. lépés az eseményt előidéző elemhez való merülés színvonala. Ie Ebben a szakaszban van egy mozgás felülről lefelé, azaz. az ablakból az elemhez. Szintén ezt a fázist a lehallgatási szakasznak is hívják.
- A 2. szakasz a cél megvalósításának színtere, azaz. elemet (objektumot), amely létrehozta az eseményt.
Figyelembe véve az esemény minden szakaszát, a következő képet kapjuk:
Módosítsuk a fenti példa forgatókönyvét az alábbiak szerint:
A addEventListener és removeEventListener módszerek harmadik paramétere határozza meg azt a szintet, amelyen az esemény el fog érni. Ha ez a paraméter igazra van állítva. akkor az esemény lehallgatásra kerül az esemény bemerítésének (lehallgatásának) szakaszában. És ha a paraméter hamis. akkor az esemény lehallgatásra kerül a felemelkedési szakaszban. Ahhoz, hogy kezelni tudja az eseményt a célon, használja a false értéket a addEventListener metódussal. és az érték igaz.
Az elemet létrehozó elem beszerzése
Annak érdekében, hogy megkapjuk a célelemet, azaz. az elemet, amely az eseményt generálta, a cél (event.target) tulajdonságot kell használnia.
Tekintsük a fenti példát, amelyben a parancsfájl tartalmát a következőkre cseréljük:
Ebben a példában hozzáadtuk a "click" eseménykezelőt a testelemhez. Ez a kezelő kiadja a konzolnak az elemet, amelyik a kezelőt és az eseményt generáló elemet hívta.
Mutassuk be példaünket a bal egérgombbal az erős elemhez tartozó területen: