JavaScript DOM EventListener

Obsah

    Zobrazit obsah

Metoda addEventListener()

Příklad

Přidejte posluchač událostí, který se spustí, když uživatel klikne na tlačítko:

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

Zkuste to sami →

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

Metoda addEventListener() připojí k zadanému prvku obslužnou rutinu události.

Metoda addEventListener() připojí obslužnou rutinu události k prvku, aniž by přepsala stávající obslužné rutiny události.

K jednomu prvku můžete přidat mnoho obslužných rutin událostí.

K jednomu prvku můžete přidat mnoho obslužných rutin událostí stejného typu, tj. dvě události „kliknutí“.

Posluchače událostí můžete přidat k jakémukoli objektu DOM, nejen k prvkům HTML. tj. objekt okna.

Metoda addEventListener() usnadňuje řízení toho, jak událost reaguje na bublání.

Při použití metody addEventListener() je kvůli lepší čitelnosti kód JavaScript oddělen od značky HTML. a umožňuje vám přidávat posluchače událostí, i když neovládáte značkování HTML.

Posluchač událostí můžete snadno odebrat pomocí metody removeEventListener().

Syntax

element.addEventListener(event, function, useCapture);

Prvním parametrem je typ události (například "kliknutí" nebo "mousedown" nebo jakákoli jiná událost HTML DOM.)

Druhým parametrem je funkce, kterou chceme volat, když dojde k události.

Třetí parametr je booleovská hodnota určující, zda se má použít probublávání událostí nebo zachycování událostí. Tento parametr je volitelný.

Všimněte si, že nepoužíváte předpona "zapnuto" pro událost; použijte "click" místo "onclick".

Přidejte k prvku obslužnou rutinu události

Příklad

Upozornění "Ahoj světe!" když uživatel klikne na prvek:

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

Zkuste to sami →

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

Můžete také odkazovat na externí „pojmenovanou“ funkci:

Příklad

Upozornění "Ahoj světe!" když uživatel klikne na prvek:

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

Zkuste to sami →

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

Přidejte mnoho obslužných rutin událostí do stejného prvku

Metoda addEventListener() umožňuje přidat mnoho událostí do stejné prvek bez přepsání existujících událostí:

Příklad

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

Zkuste to sami →

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

Do stejného prvku můžete přidat události různých typů:

Příklad

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

Zkuste to sami →

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

Přidejte obslužnou rutinu události do okna Object

Metoda addEventListener() umožňuje přidávat posluchače událostí do libovolného kódu HTML Objekt DOM, jako jsou prvky HTML, dokument HTML, objekt okna nebo jiné objekty, které podporují události, jako je objekt xmlHttpRequest.

Příklad

Přidejte posluchač události, který se spustí, když uživatel změní velikost okna:

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

Zkuste to sami →

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

Předávání parametrů

Při předávání hodnot parametrů použijte "anonymní funkce", která volá zadanou funkci s parametry:

Příklad

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

Zkuste to sami →

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

Probublávání událostí nebo zachycování událostí?

Existují dva způsoby šíření událostí v HTML DOM, probublávání a zachycování.

Šíření události je způsob, jak definovat pořadí prvků, když nastane událost. Pokud máte prvek <p> uvnitř prvku <div> a uživatel klikne na prvek <p>, událost "click" by měla být zpracována jako první?

Při bublání se nejprve zpracuje nejvnitřnější událost prvku a poté vnější: Nejprve se zpracuje událost kliknutí prvku <p> a poté událost kliknutí prvku <div>.

Při zachycování je nejprve zpracována událost nejvíce vnějšího prvku a poté vnitřní: Nejprve bude zpracována událost kliknutí prvku <div> a poté událost kliknutí prvku <p>.

Pomocí metody addEventListener() můžete určit typ šíření pomocí parametru "useCapture":

addEventListener(event, function, useCapture);

Výchozí hodnota je false, která použije šíření bublání, když je hodnota nastavena na hodnotu true, událost používá šíření zachycování.

Příklad

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

Zkuste to sami →

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

Metoda removeEventListener()

Metoda removeEventListener() odstraňuje obslužné rutiny událostí, které byly připojené pomocí metody addEventListener():

Příklad

element.removeEventListener("mousemove", myFunction);

Zkuste to sami →

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

Odkaz na objekt události HTML DOM

Seznam všech událostí HTML DOM naleznete v naší úplné Referenční příručce objektu událostí HTML DOM.