JavaScript DOM EventListener

Indholdsfortegnelse

AddEventListener() metoden

Eksempel

Tilføj en begivenhedslytter, der udløses, når en bruger klikker på en knap:

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

Prøv det selv →

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

Metoden addEventListener() knytter en hændelseshandler til det angivne element.

Metoden addEventListener() knytter en hændelseshandler til et element uden at overskrive eksisterende hændelseshandlere.

Du kan tilføje mange hændelseshandlere til ét element.

Du kan tilføje mange hændelseshandlere af samme type til et element, altså to "klik" hændelser.

Du kan tilføje begivenhedslyttere til ethvert DOM-objekt, ikke kun HTML-elementer. dvs vinduesobjektet.

Metoden addEventListener() gør det nemmere at kontrollere, hvordan hændelsen reagerer på bobler.

Når du bruger addEventListener() metoden, adskilles JavaScript fra HTML-markeringen for bedre læsbarhed og giver dig mulighed for at tilføje begivenhedslyttere, selv når du ikke kontrollerer HTML-markeringen.

Du kan nemt fjerne en begivenhedslytter ved at bruge metoden removeEventListener().

Syntaks

element.addEventListener(event, function, useCapture);

Den første parameter er typen af hændelsen (såsom "klik" eller "mousedown" eller enhver anden HTML DOM-begivenhed.)

Den anden parameter er den funktion, vi vil kalde, når hændelsen indtræffer.

Den tredje parameter er en boolsk værdi, der angiver, om der skal bruges hændelsesbobling eller hændelsesregistrering. Denne parameter er valgfri.

Bemærk, at du ikke bruger "on" præfiks for begivenheden; brug "klik" i stedet for "onclick".

Tilføj en hændelseshandler til et element

Eksempel

Alert "Hej verden!" når brugeren klikker på et element:

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

Prøv det selv →

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

Du kan også henvise til en ekstern "navngivet" funktion:

Eksempel

Alert "Hej verden!" når brugeren klikker på et element:

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

Prøv det selv →

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

Tilføj mange hændelseshandlere til det samme element

Metoden addEventListener() giver dig mulighed for at tilføje mange begivenheder til den samme element uden at overskrive eksisterende hændelser:

Eksempel

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

Prøv det selv →

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

Du kan tilføje begivenheder af forskellige typer til det samme element:

Eksempel

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

Prøv det selv →

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

Tilføj en hændelseshandler til vinduet Objekt

Metoden addEventListener() giver dig mulighed for at tilføje begivenhedslyttere på enhver HTML DOM-objekt såsom HTML-elementer, HTML-dokumentet, vinduesobjektet eller andet objekter, der understøtter hændelser, såsom xmlHttpRequest-objektet.

Eksempel

Tilføj en hændelseslytter, der udløses, når en bruger ændrer vinduets størrelse:

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

Prøv det selv →

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

Bestå parametre

Når du sender parameterværdier, skal du bruge en "anonym funktion", der kalder den angivne funktion med parametrene:

Eksempel

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

Prøv det selv →

<!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 eller Event Capture?

Der er to måder at udbrede hændelser i HTML DOM, boblende og indfangning.

Hændelsesudbredelse er en måde at definere elementrækkefølgen på, når en hændelse indtræffer. Hvis du har et <p>-element inde i et <div>-element, og brugeren klikker på <p>-elementet, hvilket elements "klik" begivenhed skal håndteres først?

I bubbling håndteres det inderste elements begivenhed først og derefter den ydre: <p> elementets klikhændelse håndteres først, derefter <div> elementets klikhændelse.

Ved fangning håndteres det ydre mest elements begivenhed først og derefter den indre: <div> elementets klikhændelse vil blive håndteret først, derefter <p> elementets klikhændelse.

Med metoden addEventListener() kan du angive udbredelsestypen ved at bruge parameteren "useCapture":

addEventListener(event, function, useCapture);

Standardværdien er falsk, hvilket vil bruge boblende udbredelse, når værdien er sat til sand, bruger hændelsen den indfangende udbredelse.

Eksempel

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

Prøv det selv →

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

Metoden removeEventListener()

Metoden removeEventListener() fjerner hændelseshandlere, der er blevet vedhæftet med addEventListener() metoden:

Eksempel

element.removeEventListener("mousemove", myFunction);

Prøv det selv →

<!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 Event Object Reference

For en liste over alle HTML DOM hændelser, se vores komplette HTML DOM Event Object Reference.