A JavaScript addEventListener () metódus lehetővé teszi a függvények beállítását, amelyek akkor hívhatók meg, amikor egy meghatározott esemény megtörténik, például amikor a felhasználó egy gombra kattint. Ez az oktatóanyag megmutatja, hogyan lehet az addEventListener () kódot implementálni.
Az események és az eseménykezelők megértése
Az események olyan műveletek, amelyek akkor történnek, amikor a felhasználó vagy a böngésző manipulál egy oldalt. Fontos szerepet játszanak, mivel a weblap elemeinek dinamikus változását okozhatják.
Például, amikor a böngésző befejezi a dokumentum betöltését, akkor loadesemény történt. Ha a felhasználó egy gombra kattint egy oldalon, akkor clickesemény történt.
Sok esemény történhet egyszer, többször vagy soha. Lehet, hogy nem is tudja, hogy mikor fog bekövetkezni egy esemény, különösen, ha azt felhasználó generálja.
Ezekben az esetekben egy eseménykezelőre van szükség, hogy észlelje, amikor egy esemény bekövetkezik. Így beállíthat egy kódot, amely reagál az eseményekre, ahogy azok menet közben történnek.
A JavaScript eseménykezelőt biztosít a addEventListener()módszer formájában . Ez a kezelő egy olyan HTML elemhez csatolható, amelyhez figyelni szeretné az eseményeket, és az elemhez több kezelő is kapcsolódhat.
addEventListener () Szintaxis
Itt van a szintaxis:
target.addEventListener(event, function, useCapture) - target : az a HTML elem, amelyhez hozzá szeretné adni az eseménykezelőt. Ez az elem a Document Object Model (DOM) részeként létezik, és érdemes megismerkednie a DOM elem kiválasztásával.
- esemény : az esemény nevét meghatározó karakterlánc. Már említettük
loadés azclickeseményeket. A kíváncsiskodók számára itt található a HTML DOM események teljes listája. - function : meghatározza az esemény észlelésekor futtatandó funkciót. Ez az a varázslat, amely lehetővé teszi a weboldalak dinamikus változását.
- useCapture : opcionális logikai érték (true vagy false), amely meghatározza, hogy az eseményt a rögzítés vagy a buborékolás szakaszában kell-e végrehajtani. Beágyazott HTML elemek (például egy a-
imgn belüldiv) csatolt eseménykezelőkkel ez az érték határozza meg, hogy melyik esemény kerül végrehajtásra először. Alapértelmezés szerint hamisra van állítva, ami azt jelenti, hogy a legbelső HTML eseménykezelőt hajtják végre először (buborékos szakasz).
addEventListener () Kódpélda
Ez egy egyszerű példa, amelyet tettem addEventListener().
Amikor a felhasználó rákattint a gombra, megjelenik egy üzenet. Egy újabb gombnyomással elrejti az üzenetet. Itt van a releváns JavaScript:
let button = document.querySelector('#button'); let msg = document.querySelector('#message'); button.addEventListener('click', ()=>{ msg.classList.toggle('reveal'); }) Ugrás a korábban bemutatott szintaxisra addEventListener():
- target : HTML elem a következővel:
id='button' - function : névtelen (nyíl) függvény, amely az üzenet felfedéséhez / elrejtéséhez szükséges kódot állít be
- useCapture : balra az alapértelmezett értékre
false
A funkcióm képes felfedni / elrejteni az üzenetet egy "felfedés" nevű CSS osztály hozzáadásával / eltávolításával, amely megváltoztatja az üzenet elem láthatóságát.
Természetesen a kódban nyugodtan testre szabhatja ezt a funkciót. A névtelen függvényt helyettesítheti egy saját megnevezett funkcióval is.
Passing Event mint paraméter
Előfordulhat, hogy több információt szeretnénk megtudni az eseményről, például arról, hogy milyen elemre kattintottak. Ebben a helyzetben át kell adnunk egy eseményparamétert a funkciónknak.
Ez a példa bemutatja, hogyan szerezheti be az elem azonosítóját:
button.addEventListener('click', (e)=>{ console.log(e.target.id) }) Itt az eseményparaméter egy változó nevű, ede könnyen más néven nevezhető, például "esemény". Ez a paraméter egy olyan objektum, amely különféle információkat tartalmaz az eseményről, például a célazonosítót.
Nem kell semmi különöset tennie, és a JavaScript automatikusan tudja, mit kell tennie, ha egy paramétert ad át így a funkciójának.
Az eseménykezelők eltávolítása
Ha valamilyen oknál fogva már nem szeretné, hogy egy eseménykezelő aktiválódjon, a következőképpen távolíthatja el:
target.removeEventListener(event, function, useCapture); A paraméterek megegyeznek a addEventListener().
Gyakorlat teszi a mestert
The best way to get better with event handlers is to practice with your own code.
Here is an example project I did in which I used event handlers to change the color, size, and speed of bubbles flowing across the background of a web page (you will need to click on the central panel to reveal the controls).
Have fun and go make something awesome!
For more beginner-friendly web development knowledge, visit my blog at 1000 Mile World and follow me on Twitter.