Az eseménykezelés kezelése JavaScript-ben (példák és minden)

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:

  1. A dokumentum és ablak objektumokat, és hozzá Eseményfigyelőkre nekik.
  2. Az Event.preventDefault () metódus és annak használata.
  3. Az Event.stopPropagation () metódus példával.
  4. 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:

  1. 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).
  2. 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.