JavaScript-DOM-EventListener

Inhaltsverzeichnis

Die addEventListener()-Methode

Beispiel

Fügen Sie einen Ereignis-Listener hinzu, der ausgelöst wird, wenn ein Benutzer auf eine Schaltfläche klickt:

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

Probieren Sie es selbst aus →

<!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>

Die Methode addEventListener() fügt dem angegebenen Element einen Ereignishandler hinzu.

Die Methode addEventListener() fügt einem Element einen Event-Handler hinzu, ohne vorhandene Event-Handler zu überschreiben.

Sie können einem Element viele Event-Handler hinzufügen.

Sie können einem Element viele Event-Handler desselben Typs hinzufügen, also zwei „Click“-Events.

Sie können Ereignis-Listener zu jedem DOM-Objekt hinzufügen, nicht nur zu HTML-Elementen. d.h. das Fensterobjekt.

Mit der Methode addEventListener() lässt sich leichter steuern, wie das Ereignis auf Bubbling reagiert.

Bei Verwendung der Methode addEventListener() wird das JavaScript zur besseren Lesbarkeit vom HTML-Markup getrennt und ermöglicht Ihnen das Hinzufügen von Ereignis-Listenern, auch wenn Sie das HTML-Markup nicht kontrollieren.

Sie können einen Ereignis-Listener ganz einfach entfernen, indem Sie die Methode removeEventListener() verwenden.

Syntax

element.addEventListener(event, function, useCapture);

Der erste Parameter ist die Art des Ereignisses (z. B. „click“ oder „mousedown“ oder ein anderes HTML-DOM-Ereignis.)

Der zweite Parameter ist die Funktion, die wir aufrufen möchten, wenn das Ereignis eintritt.

Der dritte Parameter ist ein boolescher Wert, der angibt, ob Event-Bubbling oder Event-Capturing verwendet werden soll. Dieser Parameter ist optional.

Beachten Sie, dass Sie das nicht verwenden „on“-Präfix für das Ereignis; Verwenden Sie „click“ anstelle von „onclick“.

Fügen Sie einem Element einen Event-Handler hinzu

Beispiel

Alarm „Hallo Welt!“ wenn der Benutzer auf ein Element klickt:

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

Probieren Sie es selbst aus →

<!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>

Sie können auch auf eine externe „benannte“ Funktion verweisen:

Beispiel

Alarm „Hallo Welt!“ wenn der Benutzer auf ein Element klickt:

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

Probieren Sie es selbst aus →

<!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>

Fügen Sie dem gleichen Element viele Event-Handler hinzu

Mit der Methode addEventListener() können Sie viele Ereignisse zu demselben hinzufügen Element, ohne vorhandene Ereignisse zu überschreiben:

Beispiel

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

Probieren Sie es selbst aus →

<!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>

Sie können demselben Element Ereignisse unterschiedlichen Typs hinzufügen:

Beispiel

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

Probieren Sie es selbst aus →

<!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>

Fügen Sie dem Fensterobjekt einen Event-Handler hinzu

Mit der Methode addEventListener() können Sie Ereignis-Listener zu jedem HTML hinzufügen DOM-Objekt wie HTML-Elemente, das HTML-Dokument, das Fensterobjekt oder andere Objekte, die Ereignisse unterstützen, wie das xmlHttpRequest-Objekt.

Beispiel

Fügen Sie einen Ereignis-Listener hinzu, der ausgelöst wird, wenn ein Benutzer die Größe des Fensters ändert:

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

Probieren Sie es selbst aus →

<!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>

Übergabe von Parametern

Verwenden Sie bei der Übergabe von Parameterwerten eine „anonyme Funktion“, die die angegebene Funktion mit den Parametern aufruft:

Beispiel

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

Probieren Sie es selbst aus →

<!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>

Event-Bubbling oder Event-Capturing?

Es gibt zwei Möglichkeiten der Ereignisweitergabe im HTML-DOM: Bubbling und Capturen.

Die Ereignisweitergabe ist eine Möglichkeit, die Reihenfolge der Elemente beim Eintreten eines Ereignisses zu definieren. Wenn Sie ein <p>-Element in einem <div>-Element haben und der Benutzer auf das <p>-Element klickt, welches Element „Klick“-Ereignis sollte zuerst behandelt werden?

Beim Bubbling wird zuerst das Ereignis des innersten Elements und dann das äußere Ereignis behandelt: Das Klickereignis des <p>-Elements wird zuerst verarbeitet, dann das Klickereignis des <div>-Elements.

Bei der Erfassung wird zuerst das Ereignis des äußersten Elements und dann das innere behandelt: Das Klickereignis des <div>-Elements wird zuerst verarbeitet, dann das Klickereignis des <p>-Elements.

Mit der Methode addEventListener() können Sie den Propagierungstyp angeben, indem Sie den Parameter „useCapture“ verwenden:

addEventListener(event, function, useCapture);

Der Standardwert ist „false“, wodurch die sprudelnde Ausbreitung verwendet wird. Wenn der Wert auf „true“ gesetzt ist, verwendet das Ereignis die einfangende Ausbreitung.

Beispiel

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

Probieren Sie es selbst aus →

<!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>

Die Methode „removeEventListener()“.

Die Methode removeEventListener() entfernt bisherige Event-Handler mit der Methode addEventListener() angehängt:

Beispiel

element.removeEventListener("mousemove", myFunction);

Probieren Sie es selbst aus →

<!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-Ereignisobjektreferenz

Eine Liste aller HTML-DOM-Ereignisse finden Sie in unserer vollständigen HTML-DOM-Ereignisobjektreferenz.