Az eseménybuborékolás és az eseményrögzítés a JavaScript-ben leggyakrabban használt kifejezés az esemény folyamán. Ez az eseményterjesztés két módja a HTML DOM API-ban. Ez a cikk az Eseménybuborékolásról és az Eseményrögzítésről a JavaScript-ben részletesen leírja, miért igényeljük ezeket a következő sorrendben:
Mi az eseménybuborékolás a JavaScriptben?
Az eseménybuborékolás az a kifejezés, amellyel az embereknek találkozniuk kell, miközben fejlesztenek egy webalkalmazást vagy weboldalt . Alapvetően az Event Bubbling olyan technika, amelyben az eseménykezelőket hívják meg, amikor az egyik elem be van ágyazva egy másik elembe, és ugyanannak az eseménynek kell lennie. Hasonló a tokozáshoz.
Az Event Bubbling csak egy kis része az eseménykezelésnek a JavaScript-ben. Ahhoz, hogy jobban megértsük, tudnunk kell az Eseményterjesztésről és arról, hogy miként támogatja az Eseménybuborékolást.
Mi az eseményszaporítás?
Az Eseményterjesztés szülőfogként összehasonlítható az eseménybuborékolással és a gyermekrögzítéssel.A következőképpen van ábrázolva:
Ha rákattint bármelyik képre, az nemcsak kattintási eseményt generál, hanem az „a” szülőhöz és a „nagy” nagyapához. Ily módon a funkció terjedése megtörténik. Itt a képet gyermeknek tekintik, és ez az esemény célpontja, ahol a kattintás létrejön. A kép és ősei együtt alkotják az ágat egy fa terminológiában. Az elágazás fontos, amikor megismerjük azt az utat, amelyen az esemény tovább halad.
hogyan lehet tömböt készíteni
A hallgatók mindegyikét felhívják egy esemény objektummal, amely információkat gyűjt az eseményről. Ez a terjedés nagyon fontos, mivel megismerjük az összes esemény meghívásának folyamatát az adott eseményre. A fenti kép alapján észrevehetjük, hogy az ág meghatározása statikus. Az esemény során bekövetkező bármilyen famódosítás figyelmen kívül marad. Itt a terjedés kétirányú, vagyis az ablakból az esemény célpontjába megy, és visszatér. Itt a terjedést nagyjából három fő típusba sorolják. Ezek:
- A rögzítés fázisa: Az ablakból az esemény célfázisa felé haladva.
- A célfázis: Ez a célfázis.
- A buborék fázis: Az eseményt megcélzó szülőtől az ablakig.
Mi az esemény rögzítése?
Ebben a fázisban hívják a kaptató hallgatókat, akiknek az értékét „igazként” regisztrálták. Írásban:
el.addEventListener ('kattintás', figyelő, igaz)Itt a hallgató értékét „igaznak” regisztrálták, ezért ezt az eseményt rögzítik. Ha nem volt érték, akkor az alapértelmezett érték hamis volt, és az esemény nem lett rögzítve. Tehát ebben a fázisban az az esemény, amelynek értéke igaz, csak az ablakból talál utat, hívja és rögzíti.
Ezután az esemény célfázisában az összes regisztrált hallgatót hívják, függetlenül attól, hogy igaz vagy hamis jelzői állapotuk van-e.
Eseménybuborékolás és eseményrögzítés használata JavaScript-ben
A Buborékolás fázisban csak a nem befogót hívják meg, vagyis azokat az eseményeket, amelyek zászlóértéke „hamis”. Az eseménybuborékolás és az eseményrögzítés nagyon hasznos és fontos a DOM (Document Object Model) terminológiában.
el.addEventListener ('kattintás', figyelő, hamis) // a hallgató nem rögzíti az el.addEventListener ('kattintás', figyelő) // a hallgató nem rögzítiA fenti kódrész a buborékoltató és a befogó fázis működését mutatja. Nem minden esemény megy az esemény célpontjához. Néhányan nem pezsegnek fel. Utazásuk a célfázis után leáll. A három eseményfázis áramlását a következő ábra szemlélteti:
mi az adat a tudományban
Az eseménybuborékolás nem minden eseménytípusban működik, azonban a hallgatónak rendelkeznie kell vele '.buborék ”Az esemény objektum logikai tulajdonsága. Néhány egyéb tulajdonság a következőket tartalmazza:
- e.cél: amely az esemény célpontjára hivatkozik.
- e.currentTarget: ez az a mód, amelyen a jelenlegi hallgatók regisztrálva vannak. Itt az értékre hivatkozva a ez kulcsszó.
- e.eventPhase: Ez egy egész szám, amely további három kulcsszóra utal, például Capturing_phase, Bubbling_phase, AT_Target fázis.
Munkafolyamat
Vizsgáljuk meg közelebbről a fenti ábrát. Kattintson a „buttonOne” elemre, majd azonnal elindul egy esemény. Normális esetben egy esemény a gyökérből indul, amely a fa legfelső eleme. Ezután a fát követi a „buttonOne” célesemény. Így utazik:
mi az esemény a javascriptben
Amint az az ábrán látható, az esemény a DOM terminológiáin keresztül jut el a végén a céleseményig. Amint az esemény eléri a célját, nem ér véget. Folytatódik a DOM terminológiáin belül, az alábbi képen látható módon.
Akárcsak korábban, az esemény útjának minden elemét, ahogy halad felfelé, értesítenek a létezéséről. Ahogy így folytatódik, biztosan azon gondolkodik, hogy le tudjuk-e állítani a folyamatot vagy sem. Nos, a kérdésre a válasz Igen, megállíthatjuk az esemény terjedését. Ez a „StopPropagation” az esemény objektum metódusa.
window.addEventListener ('click', e => {e.stopPropagation ()}, true) window.addEventListener ('click', figyelő ('c1', true) window.addEventListener ('click', figyelő ('c2 '), true) window.addEventListener (' click ', figyelő (' b1 ')) window.addEventListener (' click ', figyelő (' b2 '))A kulcsszó alkalmazásával le tudjuk állítani a terjedést. Ez így működik, amikor a „ stopPropagation ” akkor a fő események alatt szereplő összes eseményt nem hívják meg, és ezért nem hívnák meg, ahogyan a fenti kódrészlet említi. Van egy másik kulcsszó, stopImmediatePropagation ”. Ahogy a neve is mutatja, azonnal leállítja a testvérek eljárását.
Ezzel a cikkünk végére értünk. Remélem, megértette, mi az eseménybuborékolás és az eseményrögzítés a JavaScript-ben.
Most, hogy ismeri az Eseménybuborékolást és az Eseményrögzítést JavaScript-ben, nézze meg a írta Edureka. A webfejlesztési tanúsítási képzés segít megtanulni, hogyan hozhat létre lenyűgöző weboldalakat HTML5, CSS3, Twitter Bootstrap 3, jQuery és Google API-k segítségével, és telepítheti az Amazon Simple Storage Service (S3) szolgáltatásba.
Van egy kérdésünk? Kérjük, említse meg az „Eseménybuborékolás és Eseményrögzítés JavaScript-ben” megjegyzés rovatban, és mi kapcsolatba lépünk Önnel.