A addEventListener() módszerrel eseménykezelőt csatolunk egy adott elemhez. Nem írja felül a meglévő eseménykezelőket. Az események a JavaScript lényeges részét képezik. Egy weboldal a megtörtént eseménynek megfelelően válaszol. Az eseményeket a felhasználók generálhatják vagy API-k generálhatják. Az eseményfigyelő egy JavaScript eljárás, amely egy esemény bekövetkezésére vár.
Az addEventListener() metódus a beépített függvénye JavaScript . Egy adott elemhez több eseménykezelőt is hozzáadhatunk anélkül, hogy felülírnánk a meglévő eseménykezelőket.
Szintaxis
element.addEventListener(event, function, useCapture);
Bár három paramétere van, a paraméterek esemény és funkció széles körben használják. A harmadik paraméter megadása nem kötelező. Ennek a függvénynek az értékei a következők.
Paraméterértékek
esemény: Ez egy kötelező paraméter. Meghatározható egy karakterláncként, amely megadja az esemény nevét.
Megjegyzés: Ne használjon előtagot, például „on”-t a paraméterértékkel együtt. Például használja a „click” szót az „onclick” helyett.
funkció: Ez is kötelező paraméter. Ez egy JavaScript függvény amely az eseményre reagál.
armstrong szám
useCapture: Ez egy opcionális paraméter. Ez egy logikai típusú érték, amely megadja, hogy az esemény a buborékolási vagy rögzítési fázisban kerül-e végrehajtásra. Lehetséges értékei a következők igaz és hamis . Ha igazra van állítva, az eseménykezelő a rögzítési fázisban hajtja végre. Ha hamisra van állítva, a kezelő a buborékolási fázisban hajt végre. Az alapértelmezett értéke hamis .
Lássunk néhány illusztrációt az addEventListener() metódus használatáról.
Példa
Ez egy egyszerű példa az addEventListener() metódus használatára. A megadottra kell kattintanunk HTML gomb látni a hatást.
Példa az addEventListener() metódusra.
Kattintson a következő gombra a hatás megtekintéséhez.
Kattintson rám document.getElementById('btn').addEventListener('click', fun); function fun() { document.getElementById('para').innerHTML = 'Hello World' + '' + 'Üdvözöljük a javaTpoint.com oldalon'; }Tesztelje most
Kimenet
történelem java-ban
Az adott HTML gombra kattintás után a kimenet a következő lesz:
Most a következő példában látni fogjuk, hogyan lehet több eseményt hozzáadni ugyanahhoz az elemhez a meglévő események felülírása nélkül.
Példa
Ebben a példában több eseményt is hozzáadunk ugyanahhoz az elemhez.
Ez egy példa több esemény hozzáadására ugyanahhoz az elemhez.
Kattintson a következő gombra a hatás megtekintéséhez.
Kattintson rám function fun() { alert('Üdvözöljük a javaTpoint.com-on'); } function fun1() { document.getElementById('para').innerHTML = 'Ez a második függvény'; } function fun2() { document.getElementById('para1').innerHTML = 'Ez a harmadik függvény'; } var mybtn = document.getElementById('btn'); mybtn.addEventListener('kattintás', szórakozás); mybtn.addEventListener('click', fun1); mybtn.addEventListener('click', fun2);Tesztelje mostKimenet
Most, amikor rákattintunk a gombra, egy figyelmeztetés jelenik meg. Az adott HTML gombra kattintás után a kimenet a következő lesz:
Amikor kilépünk a riasztásból, a kimenet:
Példa
Ebben a példában több különböző típusú eseményt adunk hozzá ugyanahhoz az elemhez.
intellij idea vs eclipse
Ez egy példa több különböző típusú esemény hozzáadására ugyanahhoz az elemhez.
Kattintson a következő gombra a hatás megtekintéséhez.
Kattintson rám function fun() { btn.style.width = '50px'; btn.style.height = '50 képpont'; btn.style.background = 'sárga'; btn.style.color = 'kék'; } function fun1() { document.getElementById('para').innerHTML = 'Ez a második függvény'; } function fun2() { btn.style.width = ''; btn.style.height = ''; btn.style.background = ''; btn.style.color = ''; } var mybtn = document.getElementById('btn'); mybtn.addEventListener('mouseover', szórakozás); mybtn.addEventListener('click', fun1); mybtn.addEventListener('mouseout', fun2);Tesztelje mostKimenet
Ha a kurzort a gomb fölé mozgatjuk, a kimenet a következő lesz:
A gombra kattintás és a kurzor elhagyása után a kimenet a következő lesz:
Esemény buborékolása vagy eseményrögzítés
Most már megértjük a JavaScript addEventListener() harmadik paraméterének használatát, azaz useCapture.
A HTML DOM-ban Bugyborékolás és Rögzítés az események terjedésének két módja. Ezeket a módokat egy példán keresztül érthetjük meg.
Tegyük fel, hogy van egy div elemünk és egy bekezdés elemünk, és alkalmazzuk a 'kattint' eseményt mindkettőjük számára a addEventListener() módszer. Most az a kérdés, hogy a bekezdéselemre kell kattintani, melyik elem kattintási eseményét kezeljük először.
sql-be öntve
Szóval, be bugyborékolás, először a bekezdéselem eseményét, majd a div elem eseményét kezeli a rendszer. Ez azt jelenti, hogy buborékolásnál először a belső elem eseményét kezeljük, majd a legkülső elem eseményét.
Ban ben Rögzítés először a div elem eseményét, majd a bekezdéselem eseményét kezeli a rendszer. Ez azt jelenti, hogy a rögzítés során először a külső elem eseményét kezeljük, majd a legbelső elem eseményét.
karakterlánc értéke
addEventListener(event, function, useCapture);
A terjedést a segítségével tudjuk megadni useCapture paraméter. Ha hamisra van állítva (ez az alapértelmezett érték), akkor az esemény buborékos terjedést használ, ha pedig igaz, akkor a rögzítési terjedést.
Meg tudjuk érteni a bugyborékoló és elfogása illusztráció segítségével.
Példa
Ebben a példában két div elem van. Láthatjuk a buborékoló hatást az első div elemen és a rögzítő hatást a második div elemen.
Ha duplán kattintunk az első div elem span elemére, akkor a span elem eseménye kerül először kezelésre, mint a div elem. Ez az úgynevezett bugyborékoló .
De ha duplán kattintunk a második div elem span elemére, akkor a div elem eseményét kezeljük előbb, mint a span elemet. Ez az úgynevezett elfogása .
div{ background-color: lightblue; border: 2px solid red; font-size: 25px; text-align: center; } span{ border: 2px solid blue; } This is a div element. <br> <br> <span id="s2"> This is a span element. </span> document.getElementById('d1').addEventListener('dblclick', function() {alert('You have double clicked on div element')}, false); document.getElementById('s1').addEventListener('dblclick', function() {alert('You have double clicked on span element')}, false); document.getElementById('d2').addEventListener('dblclick', function() {alert('You have double clicked on div element')}, true); document.getElementById('s2').addEventListener('dblclick', function() {alert('You have double clicked on span element')}, true);Tesztelje most
Kimenet
A hatás megtekintéséhez duplán kell kattintanunk az adott elemekre.