JavaScript DOM EventListener

Sisällysluettelo

addEventListener()-metodi

Esimerkki

Lisää tapahtumaseurain, joka käynnistyy, kun käyttäjä napsauttaa painiketta:

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

Kokeile itse →

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

Metodi addEventListener() liittää tapahtumakäsittelijän määritettyyn elementtiin.

Metodi addEventListener() liittää tapahtumakäsittelijän elementtiin ilman, että olemassa olevia tapahtumakäsittelijöitä korvataan.

Voit lisätä useita tapahtumakäsittelijöitä yhteen elementtiin.

Voit lisätä yhteen elementtiin useita samantyyppisiä tapahtumakäsittelijöitä, eli kaksi "click"-tapahtumaa.

Voit lisätä tapahtumaseuraajia mihin tahansa DOM-objektiin, ei vain HTML-elementteihin. eli ikkunaobjekti.

Metodi addEventListener() helpottaa tapahtuman reagointia kuplimiseen.

addEventListener()-menetelmää käytettäessä JavaScript erotetaan HTML-merkinnöistä paremman luettavuuden vuoksi ja voit lisätä tapahtumaseuraajia, vaikka et hallitse HTML-merkintöjä.

Voit poistaa tapahtumaseurannan helposti käyttämällä removeEventListener()-menetelmää.

Syntaksi

element.addEventListener(event, function, useCapture);

Ensimmäinen parametri on tapahtuman tyyppi (kuten "click" tai "hiiri alas" tai mikä tahansa muu HTML DOM -tapahtuma.)

Toinen parametri on funktio, jota haluamme kutsua tapahtuman tapahtuessa.

Kolmas parametri on boolen arvo, joka määrittää, käytetäänkö tapahtumien kuplitusta vai tapahtumien sieppausta. Tämä parametri on valinnainen.

Huomaa, että et käytä "päällä" tapahtuman etuliite; käytä "click" -sanaa "onclick:n sijaan.

Lisää tapahtumakäsittelijä elementtiin

Esimerkki

Varoitus "Hei maailma!" kun käyttäjä napsauttaa elementtiä:

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

Kokeile itse →

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

Voit myös viitata ulkoiseen "nimettyyn" funktioon:

Esimerkki

Varoitus "Hei maailma!" kun käyttäjä napsauttaa elementtiä:

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

Kokeile itse →

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

Lisää useita tapahtumakäsittelijöitä samaan elementtiin

Metodin addEventListener() avulla voit lisätä useita tapahtumia samaan elementtiä ilman olemassa olevien tapahtumien päällekirjoittamista:

Esimerkki

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

Kokeile itse →

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

Voit lisätä erityyppisiä tapahtumia samaan elementtiin:

Esimerkki

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

Kokeile itse →

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

Lisää tapahtumakäsittelijä ikkunan objektiin

addEventListener()-menetelmän avulla voit lisätä tapahtumaseuraajia mihin tahansa HTML-koodiin DOM-objekti, kuten HTML-elementit, HTML-dokumentti, ikkunaobjekti tai muu tapahtumia tukevat objektit, kuten xmlHttpRequest-objekti.

Esimerkki

Lisää tapahtumaseurain, joka käynnistyy, kun käyttäjä muuttaa ikkunan kokoa:

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

Kokeile itse →

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

Parametrien läpäisy

Kun annat parametriarvoja, käytä "anonyymi funktio", joka kutsuu määritettyä funktiota seuraavilla parametreilla:

Esimerkki

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

Kokeile itse →

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

Tapahtumien kuplittaminen vai tapahtumien vangitseminen?

HTML DOM:ssa tapahtumien leviämiseen on kaksi tapaa, kuplitus ja sieppaus.

Tapahtuman eteneminen on tapa määrittää elementtien järjestys tapahtuman tapahtuessa. Jos sinulla on <p>-elementti <div>-elementin sisällä ja käyttäjä napsauttaa <p>-elementtiä, minkä elementin "click"-tapahtuma pitäisi käsitellä ensin?

Kuplituksessa käsitellään ensin sisemmän elementin tapahtuma ja sitten ulompi: <p>-elementin napsautustapahtuma käsitellään ensin ja sitten <div>-elementin napsautustapahtuma.

kaappauksessa uloimman elementin tapahtuma käsitellään ensin ja sitten sisempi: <div>-elementin napsautustapahtuma käsitellään ensin ja sitten <p>-elementin napsautustapahtuma.

AddEventListener()-metodilla voit määrittää etenemistyypin käyttämällä "useCapture"-parametria:

addEventListener(event, function, useCapture);

Oletusarvo on false, joka käyttää kuplivaa etenemistä, kun arvoksi on asetettu tosi, tapahtuma käyttää kaappauksen etenemistä.

Esimerkki

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

Kokeile itse →

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

RemoveEventListener() -menetelmä

Metodi removeEventListener() poistaa tapahtumakäsittelijät, jotka on liitetty addEventListener()-metodilla:

Esimerkki

element.removeEventListener("mousemove", myFunction);

Kokeile itse →

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

Katso luettelo kaikista HTML DOM -tapahtumista täydellisestä HTML DOM -tapahtumaobjektiviittauksesta.