JavaScript DOM EventListener


Innehållsförteckning

    Visa innehållsförteckning


Metoden addEventListener()

Exempel

Lägg till en händelseavlyssnare som aktiveras när en användare klickar på en knapp:

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

Prova själv →

<!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() kopplar en händelsehanterare till det angivna elementet.

Metoden addEventListener() kopplar en händelsehanterare till ett element utan att skriva över befintliga händelsehanterare.

Du kan lägga till många händelsehanterare till ett element.

Du kan lägga till många händelsehanterare av samma typ till ett element, det vill säga två "klick"-händelser.

Du kan lägga till händelseavlyssnare till alla DOM-objekt, inte bara HTML-element. dvs fönsterobjektet.

Metoden addEventListener() gör det lättare att kontrollera hur händelsen reagerar på bubbling.

När du använder metoden addEventListener() separeras JavaScript från HTML-uppmärkningen, för bättre läsbarhet och låter dig lägga till händelseavlyssnare även när du inte kontrollerar HTML-uppmärkningen.

Du kan enkelt ta bort en händelseavlyssnare genom att använda metoden removeEventListener().


Syntax

element.addEventListener(event, function, useCapture);

Den första parametern är typen av händelse (som "klick" eller "mousedown" eller någon annan HTML DOM-händelse.)

Den andra parametern är funktionen vi vill anropa när händelsen inträffar.

Den tredje parametern är ett booleskt värde som anger om händelsebubbling eller händelsefångning ska användas. Denna parameter är valfri.

Observera att du inte använder "på" prefix för händelsen; använd "klick" istället för "onclick.


Lägg till en händelsehanterare till ett element

Exempel

Alert "Hej världen!" när användaren klickar på ett element:

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

Prova själv →

<!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 också referera till en extern "namngiven" funktion:

Exempel

Alert "Hej världen!" när användaren klickar på ett element:

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

Prova själv →

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


Lägg till många händelsehanterare till samma element

Metoden addEventListener() låter dig lägga till många händelser till samma element, utan att skriva över befintliga händelser:

Exempel

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

Prova själv →

<!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 lägga till händelser av olika typer till samma element:

Exempel

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

Prova själv →

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

Lägg till en händelsehanterare till fönsterobjektet

Metoden addEventListener() låter dig lägga till händelseavlyssnare på valfri HTML DOM-objekt som HTML-element, HTML-dokumentet, fönsterobjektet eller annat objekt som stöder händelser, som xmlHttpRequest-objektet.

Exempel

Lägg till en händelseavlyssnare som aktiveras när en användare ändrar storlek på fönstret:

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

Prova själv →

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

Passerar parametrar

När du skickar parametervärden, använd en "anonym funktion" som anropar den angivna funktionen med parametrarna:

Exempel

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

Prova själv →

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

Det finns två sätt att sprida händelser i HTML DOM, bubbla och fånga.

Händelsespridning är ett sätt att definiera elementordningen när en händelse inträffar. Om du har ett <p>-element inuti ett <div>-element och användaren klickar på <p>-elementet, vilket elements "klick"-händelse ska hanteras först?

I bubbling hanteras det innersta elementets händelse först och sedan den yttre: <p>-elementets klickhändelse hanteras först, sedan <div>-elementets klickhändelse.

Vid fångning hanteras det yttre elementets händelse först och sedan den inre: <div>-elementets klickhändelse kommer att hanteras först, sedan <p>-elementets klickhändelse.

Med metoden addEventListener() kan du ange förökningstypen genom att använda parametern "useCapture":

addEventListener(event, function, useCapture);

Standardvärdet är false, vilket kommer att använda bubbling propagation, när värdet är satt till true, använder händelsen capture propagation.

Exempel

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

Prova själv →

<!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() tar bort händelsehanterare som har varit bifogas med metoden addEventListener():

Exempel

element.removeEventListener("mousemove", myFunction);

Prova själv →

<!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-händelseobjektreferens

För en lista över alla HTML DOM-händelser, titta på vår fullständiga HTML DOM Event Object Reference.