A weboldal vagy a webhely frissítése közben előfordulhatnak olyan helyzetek, amikor egyes hivatkozásokra már nincs szükség, vagy azok irrelevánssá válnak. Ezen túlmenően egy adott webhely forgalmának hatékony kezelése. Ilyen esetekben az események JavaScriptben való törlése csodákat tesz bizonyos funkciók letiltásával és az ilyen esetek kezelésével.
Hogyan lehet törölni az eseményeket JavaScriptben?
A következő módszerek használhatók az események visszavonására JavaScriptben:
-
- ' preventDefault() ” módszerrel.
- ' Logikai érték ” megközelítés.
- ' stopPropagation() ” módszerrel.
1. megközelítés: Törölje az eseményeket JavaScriptben a preventDefault() metódus használatával
Az ' preventDefault() ” metódus törli a csatolt eseményt, ha az törölhető. Ezzel a módszerrel leválasztható a csatolt esemény az elért hivatkozásról, ezzel megakadályozva a művelet végrehajtását.
Szintaxis
event.preventDefault ( )
Az adott szintaxisban:
-
- ' esemény ” a leválasztandó eseményre utal.
Példa
Menjen végig az alábbi kódrészleten:
< h3 > A Click esemény törlésre kerül ! h3 >
< a id = 'webhely' href = 'https://www.google.com/' > Látogassa meg a Google webhelyét a >
document.getElementById ( 'webhely' ) .addEventListener ( 'kattintás' , funkció ( megszünteti ) {
cancel.preventDefault ( ) ;
} ) ;
Kövesse az alábbi lépéseket:
-
- Először is adja meg a dokumentumobjektum modellen (DOM) megjelenítendő címsort.
- Ezt követően adja meg a „ URL ' használni a ' href ' tulajdonság.
- Most a kód JavaScript részében nyissa meg a megadott URL-t.
- Ezenkívül csatoljon egy „ kattintson ' esemény az URL-lel egy függvény segítségével, amely a ' addEventListener() ” módszerrel.
- Végül a „ preventDefault() ” metódus kerül alkalmazásra a függvény paraméterének segítségével a csatolt esemény leválasztására.
Kimenet
2. megközelítés: Törölje az eseményeket JavaScriptben logikai érték visszaadásával
Ez a megközelítés megvalósítható a „ hamis ” logikai érték a kiváltott eseményen.
Példa
A következő kódsorok mutatják be a megfogalmazott koncepciót:
< központ >< bemenet típus = 'szöveg' helykitöltő = 'Szöveg beírása' bemenet = 'cancelEvent()' > központ >funkció cancelEvent ( ) {
Visszatérés hamis ;
éber ( 'Ez a nyilatkozat nem jelenik meg' )
}
A fenti kódrészletben:
-
- Először is a „
” címke, rendeljen hozzá egy beviteli szövegmezőt. - Csatoljon egy „ bemenet ' esemény a megadott ' helykitöltő ” értékét. Ez a megadott függvény meghívását eredményezi a szöveg bevitelekor.
- Most a kód JavaScript részében deklaráljon egy ' nevű függvényt cancelEvent() ”. A definíciójában adja vissza a ' logikai értéket hamis ', hogy törölje a benne foglalt' esemény ”.
- Végül adja meg a megadott üzenetet a figyelmeztető mezőben. A visszaadott logikai érték elkerüli a párbeszédpanel megjelenítését.
- Először is a „
Kimenet
A fenti kimenetben megfigyelhető, hogy az elért funkciónál nem jelenik meg a riasztás párbeszédpanel, amivel a csatolt esemény törlődik.
3. megközelítés: Törölje az eseményeket JavaScriptben a stopPropagation() módszerrel
Az ' stopPropagation() ” metódus megakadályozza ugyanazon esemény terjesztését. Ez a módszer használható a két div közötti terjedés leállítására a jelölőnégyzet bejelölése után.
Szintaxis
event.stopPropagation ( )
Példa
Figyelje meg a következő kódsorokat:
< központ >< h3 > Kattintson a weboldalra a változás figyeléséhez: h3 >< div kattintásra = 'elem2()' > Linux
< div kattintásra = 'elem1(esemény)' > Weboldal div >
div >
< br >
Jelölje be a szaporodás leállításához:
< bemenet típus = 'jelölőnégyzet' id = 'jelölje be' >
központ >
-
- Az első lépésben, hasonlóan, vegye fel a megadott címsort.
- Most adjon meg két ' div ' címkék csatolva ' kattintásra ” eseményeket, amelyek mindegyike két különböző függvényt hív meg elem2() és elem1().
- Ezenkívül adjon meg egy jelölőnégyzetet a megadott azonosítóval. Ez a jelölőnégyzet leállítja a terjesztést két div között.
Most nézze meg a következő JavaScript-kódsorokat:
funkció elem1 ( és ) {éber ( 'Ön rákattintott a webhelyre' ) ;
ha ( document.getElementById ( 'jelölje be' ) .ellenőrizte ) {
e.stopPropagation ( ) ;
}
}
funkció elem2 ( ) {
éber ( 'Linuxhintre kattintottál' ) ;
}
A fenti js kódban:
-
- Határozzon meg egy '' nevű függvényt elem1() ”. Itt a paraméter ' és ' arra utal, hogy ' esemény ” a kód HTML részében meghatározott módon aktiválódik.
- A definíciójában jelenítse meg a riasztási párbeszédpanelt a megadott üzenettel.
- Ezt követően nyissa meg a létrehozott jelölőnégyzetet az azonosítójával a „ getElementById() ” módszerrel. Alkalmazza továbbá a „ ellenőrizve ” tulajdonságot, hogy ellenőrizze a bejelölt jelölőnégyzet állapotát.
- Ezután alkalmazza a „ stopPropagation() ' paraméterre utaló módszer ' és ”. Ennek eredményeként az egyik függvényről a másikra történő terjedés leáll.
- Hasonlóképpen határozzon meg egy másik függvényt ' elem2() ” terjeszteni kell. Ez a funkció csak a terjedés előtt lesz működőképes.
Kimenet
Itt megfigyeli a div gombra kattintáskor a jelölőnégyzet bejelölése utáni viselkedést.
Összeállítottuk az események visszavonásának módszereit JavaScriptben.
Következtetés
Az ' preventDefault() ' módszer, a ' logikai érték ' megközelítés, vagy a ' stopPropagation() ” metódus használható az események visszavonására JavaScriptben. Az első módszer megvalósítható a csatolt esemény leválasztására, ami a link letiltását eredményezi. A logikai érték megközelítés a „ hamis ” logikai érték a kiváltott eseményen. A stopPropagation() metódus alkalmazható a két div közötti terjedés leállítására egy mellékelt jelölőnégyzet segítségével. Ez az oktatóanyag elmagyarázza az események visszavonását JavaScriptben.