logo

TechCodeview

JavaScript addEventListener()

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
JavaScript addEventListener()

Az adott HTML gombra kattintás után a kimenet a következő lesz:

JavaScript addEventListener()

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 most

Kimenet

JavaScript addEventListener()

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:

JavaScript addEventListener()

Amikor kilépünk a riasztásból, a kimenet:

JavaScript addEventListener()

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 most

Kimenet

JavaScript addEventListener()

Ha a kurzort a gomb fölé mozgatjuk, a kimenet a következő lesz:

JavaScript addEventListener()

A gombra kattintás és a kurzor elhagyása után a kimenet a következő lesz:

JavaScript addEventListener()

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(&apos;d1&apos;).addEventListener(&apos;dblclick&apos;, function() {alert(&apos;You have double clicked on div element&apos;)}, false); document.getElementById(&apos;s1&apos;).addEventListener(&apos;dblclick&apos;, function() {alert(&apos;You have double clicked on span element&apos;)}, false); document.getElementById(&apos;d2&apos;).addEventListener(&apos;dblclick&apos;, function() {alert(&apos;You have double clicked on div element&apos;)}, true); document.getElementById(&apos;s2&apos;).addEventListener(&apos;dblclick&apos;, function() {alert(&apos;You have double clicked on span element&apos;)}, true);
Tesztelje most

Kimenet

JavaScript addEventListener()

A hatás megtekintéséhez duplán kell kattintanunk az adott elemekre.