Hogyan lehet megvalósítani az addEventListener () metódust a JavaScript-ben?



Az addEventListener () egy beépített JavaScript függvény, amely figyeli az eseményt, és meghívja az esemény bekapcsolásakor.

Egy esemény fontos része . Egy weboldal egy bekövetkezett eseménynek megfelelően válaszol. Egyes eseményeket a felhasználók generálnak, másokat pedig az API-k. Ebben a cikkben megnézzük, hogyan történnek az események, és hogyan használják a JavaScript-ben található addEventListener metódust a következő sorrendben:

Mi az az eseményfigyelő?

Az eseményfigyelő egy olyan eljárás a JavaScript-ben, amely egy esemény bekövetkezésére vár. Az egyszerű példa esemény olyan felhasználó, aki rákattint az egérre vagy megnyom egy billentyűt a billentyűzeten.





Az addEventListener () beépített JavaScript funkció amely meghallgatja az eseményt, és egy második érvet kell hívni, amikor a leírt esemény kilövik. Bármely eseménykezelő hozzáadható egyetlen elemhez anélkül, hogy felülírná a meglévő eseménykezelőket.

addEventListener () a JavaScript-ben

Néhány jellemzők Az eseményfigyelő módszer a következőket tartalmazza:



  • Az addEventListener () módszer csatol egy eseménykezelő a megadott elemre.
  • Ez a módszer eseménykezelőt csatol egy elem nélkül felülírása meglévő eseménykezelők.
  • Hozzáadhatja sok rendezvénykezelő egy elemhez.
  • Hozzáadhat számos eseménykezelőt a azonos típusú egyhez elem , azaz két „kattintásos” esemény.
  • Az esemény hallgatói bármelyikhez hozzáadhatók ÍTÉLET ne csak HTML elemeket tárjon fel. azaz az ablak objektumot.
  • Az addEventListener () metódus teszi könnyebb hogy ellenőrizzék, hogyan esemény reagál pezsegni.

Az addEventListener () metódus használatakor a JavaScript el van választva a jelölés, a jobb olvashatóság érdekében, és lehetővé teszi esemény hallgatók hozzáadását akkor is, ha nem a HTML jelölést irányítja.

Ezenkívül könnyen eltávolíthatja az eseményhallgatót a removeEventListener () metódus .

Szintaxis:



target.addEventListener (típus, figyelő [, opciók]) target.addEventListener (típus, figyelő [, useCapture]) target.addEventListener (típus, figyelő [, useCapture, wantsUntrusted])

Paraméterértékek

Paraméter Leírás

esemény

Kívánt. Karakterlánc, amely meghatározza az esemény nevét.

Megjegyzés: Ne használja a „be” előtagot. Például használja a „click” szót az „onclick” helyett.

Az összes HTML DOM esemény felsorolásához tekintse meg a teljes HTML DOM esemény objektum referenciánkat.

funkció

Kívánt. Megadja az esemény bekövetkezésekor futtatandó funkciót.

a tabló adatkeverése nem működik

Az esemény bekövetkezésekor egy eseményobjektum kerül átadásra a függvénynek első paraméterként. Az esemény típusa tárgy a megadott eseménytől függ. Például a „click” esemény a MouseEvent objektumhoz tartozik.

useCapture

Választható. Logikai érték, amely meghatározza, hogy az eseményt a rögzítés vagy a buborékolás szakaszában kell-e végrehajtani.

Lehetséges értékek: true - Az eseménykezelő a rögzítő phasefalse- Default alkalmazásban kerül végrehajtásra. Az eseménykezelőt a buborékfázisban hajtják végre


Most, hogy tudja, hogyan működik egy eseményfigyelő, nézzünk meg egy példát a JavaScript-ben található addEventListener () elemre.

addEventListener () a JavaScript-ben: Példa

 
& lt! DOCTYPE html & gt & lthtml & gt & ltbody & gt & ltp & gt Ez a példa az addEventListener () metódust használja egy funkció végrehajtására, amikor a felhasználó egy gombra kattint. ('myBtn'). addEventListener ('click', myFunction) függvény myFunction () {document.getElementById ('demo'). innerHTML = 'Hello World'} & lt / script & gt & lt / body & gt & lt / html & gt

addEventListener a JavaScript-ben

Ezzel véget értünk az addEventListener JavaScript-en. Remélem, megértette, hogy az eseményhallgató módszer JavaScript-ben működik.

Nézze meg a mi oldalunkat amely oktató által vezetett élő képzéssel és valós projekt-tapasztalattal jár. Ez a képzés elsajátítja a back-end és a front-end webes technológiák használatának képességeit. Ez magában foglalja a webfejlesztés, a jQuery, az Angular, a NodeJS, az ExpressJS és a MongoDB képzését.

Van egy kérdésünk? Kérjük, említse meg az „addEventListener in JavaScript” blog megjegyzés rovatában, és mi visszajövünk.