JavaScript DOM EventListener

Tartalomjegyzék

Az addEventListener() metódus

Példa

Eseményfigyelő hozzáadása, amely akkor aktiválódik, amikor a felhasználó egy gombra kattint:

document.getElementById("myBtn").addEventListener("click", displayDate);

Próbálja ki Ön is →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript addEventListener()</h2>

<p>This example uses the addEventListener() method to attach a click event to a button.</p>

<button id="myBtn">Try it</button>

<p id="demo"></p>

<script>
document.getElementById("myBtn").addEventListener("click", displayDate);

function displayDate() {
  document.getElementById("demo").innerHTML = Date();
}
</script>

</body>
</html>

Az addEventListener() metódus eseménykezelőt csatol a megadott elemhez.

Az addEventListener() metódus eseménykezelőt csatol egy elemhez anélkül, hogy felülírná a meglévő eseménykezelőket.

Egy elemhez több eseménykezelőt is hozzáadhat.

Egy elemhez több azonos típusú eseménykezelőt is hozzáadhat, azaz két kattintásos eseményt.

Eseményfigyelőket hozzáadhat bármely DOM objektumhoz, nem csak HTML elemekhez. azaz az ablak objektum.

Az addEventListener() metódus megkönnyíti annak szabályozását, hogy az esemény hogyan reagáljon a buborékolásra.

Az addEventListener() metódus használatakor a JavaScript elkülönül a HTML-jelöléstől a jobb olvashatóság érdekében és lehetővé teszi eseményfigyelők hozzáadását akkor is, ha nem Ön szabályozza a HTML-jelölést.

Az eseményfigyelőket egyszerűen eltávolíthatja a removeEventListener() metódussal.

Szintaxis

element.addEventListener(event, function, useCapture);

Az első paraméter az esemény típusa (például "click" vagy "egérleállítás" vagy bármely más HTML DOM esemény.)

A második paraméter az a függvény, amelyet az esemény bekövetkezésekor meg akarunk hívni.

A harmadik paraméter egy logikai érték, amely megadja, hogy eseménybuborékolást vagy eseményrögzítést kell-e használni. Ez a paraméter nem kötelező.

Vegye figyelembe, hogy nem használja a "on" előtag az eseményhez; használja a "click" parancsot az "onclick helyett.

Eseménykezelő hozzáadása egy elemhez

Példa

Figyelmeztetés "Hello World!" amikor a felhasználó rákattint egy elemre:

element.addEventListener("click", function(){ alert("Hello World!"); });

Próbálja ki Ön is →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript addEventListener()</h2>

<p>This example uses the addEventListener() method to attach a click event to a button.</p>

<button id="myBtn">Try it</button>

<script>
document.getElementById("myBtn").addEventListener("click", function() {
  alert("Hello World!");
});
</script>

</body>
</html>

Hivatkozhat egy külső "elnevezett" függvényre is:

Példa

Figyelmeztetés "Hello World!" amikor a felhasználó rákattint egy elemre:

 element.addEventListener("click",  myFunction);
function myFunction() {
  alert ("Hello World!");
}

Próbálja ki Ön is →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript addEventListener()</h2>

<p>This example uses the addEventListener() method to execute a function when a user clicks on a button.</p>

<button id="myBtn">Try it</button>

<script>
document.getElementById("myBtn").addEventListener("click", myFunction);

function myFunction() {
  alert ("Hello World!");
}
</script>

</body>
</html>

Adjon hozzá sok eseménykezelőt ugyanahhoz az elemhez

Az addEventListener() metódus lehetővé teszi sok esemény hozzáadását ugyanahhoz elem, a meglévő események felülírása nélkül:

Példa

element.addEventListener("click", myFunction);
 element.addEventListener("click", mySecondFunction);

Próbálja ki Ön is →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript addEventListener()</h2>

<p>This example uses the addEventListener() method to add two click events to the same button.</p>

<button id="myBtn">Try it</button>

<script>
var x = document.getElementById("myBtn");
x.addEventListener("click", myFunction);
x.addEventListener("click", someOtherFunction);

function myFunction() {
  alert ("Hello World!");
}

function someOtherFunction() {
  alert ("This function was also executed!");
}
</script>

</body>
</html>

Különböző típusú eseményeket adhat hozzá ugyanahhoz az elemhez:

Példa

element.addEventListener("mouseover", myFunction);
element.addEventListener("click", mySecondFunction);
element.addEventListener("mouseout", myThirdFunction);

Próbálja ki Ön is →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript addEventListener()</h2>

<p>This example uses the addEventListener() method to add many events on the same button.</p>

<button id="myBtn">Try it</button>

<p id="demo"></p>

<script>
var x = document.getElementById("myBtn");
x.addEventListener("mouseover", myFunction);
x.addEventListener("click", mySecondFunction);
x.addEventListener("mouseout", myThirdFunction);

function myFunction() {
  document.getElementById("demo").innerHTML += "Moused over!<br>";
}

function mySecondFunction() {
  document.getElementById("demo").innerHTML += "Clicked!<br>";
}

function myThirdFunction() {
  document.getElementById("demo").innerHTML += "Moused out!<br>";
}
</script>

</body>
</html>

Adjon hozzá egy eseménykezelőt az ablak objektumához

Az addEventListener() metódus lehetővé teszi eseményfigyelők hozzáadását bármilyen HTML-hez DOM-objektum, például HTML-elemek, HTML-dokumentum, ablakobjektum vagy egyéb eseményeket támogató objektumok, például az xmlHttpRequest objektum.

Példa

Adjon hozzá egy eseményfigyelőt, amely akkor aktiválódik, amikor a felhasználó átméretezi az ablakot:

window.addEventListener("resize", function(){
  document.getElementById("demo").innerHTML = sometext;
});

Próbálja ki Ön is →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript addEventListener()</h2>

<p>This example uses the addEventListener() method on the window object.</p>

<p>Try resizing this browser window to trigger the "resize" event handler.</p>

<p id="demo"></p>

<script>
window.addEventListener("resize", function(){
  document.getElementById("demo").innerHTML = Math.random();
});
</script>

</body>
</html>

Paraméterek átadása

A paraméterértékek átadásakor használja a egy "névtelen függvény", amely meghívja a megadott függvényt a következő paraméterekkel:

Példa

element.addEventListener("click", function(){ myFunction(p1, p2); });

Próbálja ki Ön is →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript addEventListener()</h2>

<p>This example demonstrates how to pass parameter values when using the addEventListener() method.</p>

<p>Click the button to perform a calculation.</p>

<button id="myBtn">Try it</button>

<p id="demo"></p>

<script>
let p1 = 5;
let p2 = 7;
document.getElementById("myBtn").addEventListener("click", function() {
  myFunction(p1, p2);
});

function myFunction(a, b) {
  document.getElementById("demo").innerHTML = a * b;
}
</script>

</body>
</html>

Eseménybuborékolás vagy eseményrögzítés?

Az események terjesztésének két módja van a HTML DOM-ban, a buborékolás és a rögzítés.

Az eseményterjedés egy módja annak, hogy meghatározzuk az elemek sorrendjét, amikor egy esemény bekövetkezik. Ha van egy <p> elem egy <div> elemen belül, és a felhasználó rákattint a <p> elemre, melyik elem "click" eseményt kell először kezelni?

A buborékolásnál először a legtöbb elem belső eseményét kezeli a rendszer, majd a külső eseményt: először a <p> elem kattintási eseményét kezeli a rendszer, majd a <div> elem kattintási eseményét.

A rögzítéskor először a legkülső elem eseményét kezeli a rendszer, majd a belsőt: először a <div> elem kattintási eseményét kezeli a rendszer, majd a <p> elem kattintási eseményét.

Az addEventListener() metódussal megadhatja a terjedési típust a "useCapture" paraméter használatával:

addEventListener(event, function, useCapture);

Az alapértelmezett érték false, amely a buborékos terjedést használja, ha az érték igazra van állítva, az esemény a rögzítési terjedést használja.

Példa

document.getElementById("myP").addEventListener("click", myFunction, true);
document.getElementById("myDiv").addEventListener("click", myFunction, true);

Próbálja ki Ön is →

<!DOCTYPE html>
<html>
<head>
<style>
#myDiv1, #myDiv2 {
  background-color: coral;
  padding: 50px;
}

#myP1, #myP2 {
  background-color: white; 
  font-size: 20px;
  border: 1px solid;
  padding: 20px;
}
</style>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type">
</head>
<body>

<h2>JavaScript addEventListener()</h2>

<div id="myDiv1">
  <h2>Bubbling:</h2>
  <p id="myP1">Click me!</p>
</div><br>

<div id="myDiv2">
  <h2>Capturing:</h2>
  <p id="myP2">Click me!</p>
</div>

<script>
document.getElementById("myP1").addEventListener("click", function() {
  alert("You clicked the white element!");
}, false);

document.getElementById("myDiv1").addEventListener("click", function() {
  alert("You clicked the orange element!");
}, false);

document.getElementById("myP2").addEventListener("click", function() {
  alert("You clicked the white element!");
}, true);

document.getElementById("myDiv2").addEventListener("click", function() {
  alert("You clicked the orange element!");
}, true);
</script>

</body>
</html>

A removeEventListener() metódus

A removeEventListener() metódus eltávolítja azokat az eseménykezelőket, amelyek csatolva az addEventListener() metódussal:

Példa

element.removeEventListener("mousemove", myFunction);

Próbálja ki Ön is →

<!DOCTYPE html>
<html>
<head>
<style>
#myDIV {
  background-color: coral;
  border: 1px solid;
  padding: 50px;
  color: white;
  font-size: 20px;
}
</style>
</head>
<body>

<h2>JavaScript removeEventListener()</h2>

<div id="myDIV">
  <p>This div element has an onmousemove event handler that displays a random number every time you move your mouse inside this orange field.</p>
  <p>Click the button to remove the div's event handler.</p>
  <button onclick="removeHandler()" id="myBtn">Remove</button>
</div>

<p id="demo"></p>

<script>
document.getElementById("myDIV").addEventListener("mousemove", myFunction);

function myFunction() {
  document.getElementById("demo").innerHTML = Math.random();
}

function removeHandler() {
  document.getElementById("myDIV").removeEventListener("mousemove", myFunction);
}
</script>

</body>
</html>

HTML DOM eseményobjektum hivatkozás

Az összes HTML DOM esemény listájához tekintse meg teljes HTML DOM eseményobjektum-referenciánkat.