Ebben a blogban megpróbálom egyértelművé tenni az eseménykezelési mechanizmus alapjait a JavaScript-ben, bármilyen külső könyvtár, például a Jquery / React / Vue segítsége nélkül.
A következő témákat fogom elmagyarázni ebben a cikkben:
- A dokumentum és ablak objektumokat, és hozzá Eseményfigyelőkre nekik.
- Az Event.preventDefault () metódus és annak használata.
- Az Event.stopPropagation () metódus példával.
- Hogyan lehet eltávolítani egy eseményt hallgató egy elemet.
Dokumentum és ablak objektumok Eseményfigyelőkre
Az Ablak objektum a fület jelöli. Abban az esetben, ha ezt a blogot a megfelelő böngészőben olvassa, akkor az aktuális fül az Ablak objektumot képviseli.
Az ablakobjektum hozzáférhet olyan információkhoz, mint az eszköztár, az ablak magassága és szélessége, a felszólítások és a figyelmeztetések. Nézzük meg, hogyan adhatunk hozzá eseményfigyelőt (egérmutatót) az ablakobjektumhoz, és elemezhetjük annak néhány tulajdonságát.
Hogyan lehet hozzáadni a hallgatót az ablakobjektumhoz
Az addEventListener metódus a legelőnyösebb módja eseményfigyelő felvételére a DOM ablakába , dokumentumába vagy bármely más elemébe .
Van még egy úgynevezett „on” tulajdonság onclick, onmouseover stb. De nem annyira hasznos, mivel nem teszi lehetővé számunkra, hogy több eseményhallgatót vegyünk fel ugyanazon elemre. A többi módszer lehetővé teszi.
Egy eseményobjektumot argumentumként (opcionálisan) továbbítanak a kezelőnek, amely az eseményhez kapcsolódó összes információt (esetünkben egérablakot) tartalmazza az ablakon.
Nyissa meg ezen az oldalon a fejlesztői eszközöket (Ellenőrizze az elemet), és másolja be a következő kód beillesztését a konzol panelre, és nyomja meg az Enter billentyűt.
window.addEventListener("mousedown",function(event){ alert("window"); console.log(event); });Ezt követően átmehet az aktuális fül bármely szakaszába, és jobb gombbal kattintva megtekintheti a konzolt és az eseményhez kapcsolódó információkat, amint az a pillanatképben alább látható.
Megjegyzés : Ha bármelyik másik fülre lép, és jobb gombbal kattint, akkor ez az esemény nem indul el, mivel csak ehhez a laphoz tartozik (Ablak objektum).
A mousedown esemény részletei
A következő néhány sorban elmagyarázom az imént elvégzett egéreseménynek megfelelő fontos elfogott tulajdonságokat .
gomb : Mivel ez volt az egéreredményes esemény, megmondja, hogy melyik gombra kattintott. Az egér bal, középső és jobb oldali értéke 0, 1 és 2. Ha a jobb gombbal kattint, láthatja a 2. értéket.
clientX és clientY : Pozíció a tartalmi terület bal felső sarkához (Nézetablak) képest. Csak elemezze ezeknek a tulajdonságoknak az értékét a kattintott helyen, és láthatja, hogy ezek hogyan kapcsolódnak egymáshoz. Még akkor is, ha lefelé görget az oldalon, ezek a tulajdonságok változatlanok maradnak. A ScreenX és a ScreenY hivatkozás a képernyő bal felső sarkában (Monitor).
altkey / ctrlkey : Ha a jobb egérgombbal végzett művelet végrehajtása közben nyomva tartja ezeket a gombokat, láthatja, hogy ezek az értékek igazak. Egyébként hamisak, mint a mi esetünkben.
cél: Megfelel annak az elemnek, amelyen a műveletet végrehajtotta. Bármelyik elemre kattintott is, a tulajdonságnak megfelelő információkat láthatja a konzolon
Mi az a dokumentumobjektum ?
A dokumentum abból áll, ami a belső ablakon belül van. A dokumentum célja a gyökere minden csomópont a DOM. Ha HTML oldalt tölt be a böngészőbe, akkor a dokumentum azt az egész oldalt képviseli.
Az Event.preventDefault () metódus és annak használata
Néha nem akarjuk, hogy egy HTML elem úgy viselkedjen, ahogyan az alapértelmezetten viselkedik. Ilyen esetben ezt a módszert alkalmazhatjuk.
Példa : A horgonyelemre kattintva a böngésző alapértelmezés szerint átirányítja az adott oldalra. Próbáljuk meg elkerülni ezt.
Google let link = document.querySelector("a"); // It is the method to access the first matched element link.addEventListener("click", function(event) { console.log("Redirecting Stopped"); event.preventDefault(); }); Létrehozhat egy HTML fájlt, és megnézheti ezt a kódot.
Az Event.stopPropagation () metódus
Az események kifelé áramlanak. Vannak bizonyos esetek, például, ha beágyazott elemeket tartalmaz, és valamilyen eseményt hajt végre egy gyermeken, és végül a szülőn is végez valamilyen műveletet, amelyet el akar kerülni. Ilyen esetekben ez a módszer hasznos.
Kissé zavarosnak tűnik, de remélem, hogy az alábbi példa világossá teszi számodra.
Képzelje el, hogy van egy gomb a bekezdésen belül, és mindkettőhöz csatolt egy egérmutatós eseményt. A következő felhasználási eseteket szeretné elérni:
- Ha jobb gombbal kattint a gombra, akkor annak meg kell mutatnia, hogy rákattintottak, és nem terjed a szülő elemre (vagyis a bekezdésre).
- Ha bal gombbal kattint a gombra, akkor annak normálisan kifelé kell terjednie, és a bekezdések eseményhallgatóját is ki kell indítania.
Megoldás:
Hello Ho Button2
// Event Listener on the Button and it's logic document.getElementById("button12").addEventListener("mousedown", function(event) { alert("button clicked"); if (event.button == 2) // Right Click event.stopPropagation(); }); // Event Listener on the paragraph element with it's logic: document.getElementById("demo").addEventListener("mousedown", function(event) { alert("Paragraph clicked"); }); Eltávolítása egy esemény hallgató egy elemet
Ha egy eseményfigyelőt el akarunk távolítani egy elemből, akkor meg kell hívnunk az removeEventListener metódust az esemény nevével és a függvény nevével.
Megjegyzés : ha névtelen függvényeket adnak át, azok nem rendelkeznek memória leképezéssel. Tehát meg kell határoznunk ezeket a függvényeket a visszahíváson kívül, majd itt hivatkoznunk kell rájuk az removeEventListener visszahívásban.
Document.getElementbyId("id_name").removeEventListener("click",fn_name)Ha elérte ezt a pontot, tisztában kell lennie azzal, hogy az Eseményhallgatók hogyan működnek a JavaScript-ben.
Ha a kedvenc könyvtárával / keretrendszereivel való munkavégzés közben bármikor elakad az Eseménykezelés részben, akkor ezek az alapok segítenek a probléma megoldásában.