Écouteur d'événements JavaScript DOM

Table des matières

    Afficher la table des matières

La méthode addEventListener()

Exemple

Ajoutez un écouteur d'événement qui se déclenche lorsqu'un utilisateur clique sur un bouton :

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

Essayez-le vous-même →

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

La méthode addEventListener() attache un gestionnaire d'événements à l'élément spécifié.

La méthode addEventListener() attache un gestionnaire d'événements à un élément sans écraser les gestionnaires d'événements existants.

Vous pouvez ajouter plusieurs gestionnaires d'événements à un élément.

Vous pouvez ajouter plusieurs gestionnaires d'événements du même type à un élément, c'est-à-dire deux événements "clic".

Vous pouvez ajouter des écouteurs d'événements à n'importe quel objet DOM, pas seulement aux éléments HTML. c'est-à-dire l'objet fenêtre.

La méthode addEventListener() facilite le contrôle de la façon dont l'événement réagit au bouillonnement.

Lors de l'utilisation de la méthode addEventListener(), le JavaScript est séparé du balisage HTML, pour une meilleure lisibilité et vous permet d'ajouter des écouteurs d'événements même lorsque vous ne contrôlez pas le balisage HTML.

Vous pouvez facilement supprimer un écouteur d'événement à l'aide de la méthode removeEventListener().

Syntaxe

element.addEventListener(event, function, useCapture);

Le premier paramètre est le type de l'événement (comme "click" ou "mousedown" ou tout autre événement HTML DOM.)

Le deuxième paramètre est la fonction que nous voulons appeler lorsque l'événement se produit.

Le troisième paramètre est une valeur booléenne spécifiant s'il faut utiliser la diffusion d'événements ou la capture d'événements. Ce paramètre est facultatif.

Notez que vous n'utilisez pas le Préfixe « on » pour l'événement ; utilisez "cliquez" au lieu de "onclick".

Ajouter un gestionnaire d'événements à un élément

Exemple

Alerte « Bonjour tout le monde ! » lorsque l'utilisateur clique sur un élément :

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

Essayez-le vous-même →

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

Vous pouvez également faire référence à une fonction externe « nommée » :

Exemple

Alerte « Bonjour tout le monde ! » lorsque l'utilisateur clique sur un élément :

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

Essayez-le vous-même →

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

Ajouter plusieurs gestionnaires d'événements au même élément

La méthode addEventListener() permet d'ajouter plusieurs événements au même élément, sans écraser les événements existants :

Exemple

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

Essayez-le vous-même →

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

Vous pouvez ajouter des événements de différents types au même élément :

Exemple

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

Essayez-le vous-même →

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

Ajouter un gestionnaire d'événements à l'objet fenêtre

La méthode addEventListener() vous permet d'ajouter des écouteurs d'événements sur n'importe quel HTML Objet DOM tel que les éléments HTML, le document HTML, l'objet fenêtre ou autre les objets qui prennent en charge les événements, comme l'objet xmlHttpRequest.

Exemple

Ajoutez un écouteur d'événements qui se déclenche lorsqu'un utilisateur redimensionne la fenêtre :

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

Essayez-le vous-même →

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

Paramètres de transmission

Lors du passage des valeurs de paramètres, utilisez une "fonction anonyme" qui appelle la fonction spécifiée avec les paramètres :

Exemple

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

Essayez-le vous-même →

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

bouillonnement d'événements ou capture d'événements ?

Il existe deux manières de propager des événements dans le DOM HTML : le bouillonnement et la capture.

La propagation d'un événement est un moyen de définir l'ordre des éléments lorsqu'un événement se produit. Si vous avez un élément <p> à l'intérieur d'un élément <div> et que l'utilisateur clique sur l'élément <p>, quel élément L'événement « clic » doit être géré en premier ?

Dans le bullage , l'événement de l'élément le plus interne est géré en premier, puis celui de l'élément externe : l'événement click de l'élément <p> est géré en premier, puis l'événement click de l'élément <div>.

Lors de la capture , l'événement de l'élément le plus externe est géré en premier, puis celui de l'élément interne : l'événement click de l'élément <div> sera géré en premier, puis l'événement click de l'élément <p>.

Avec la méthode addEventListener() vous pouvez spécifier le type de propagation en utilisant le paramètre "useCapture" :

addEventListener(event, function, useCapture);

La valeur par défaut est false, qui utilisera la propagation bouillonnante, lorsque la valeur est définie sur true, l'événement utilise la propagation de capture.

Exemple

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

Essayez-le vous-même →

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

La méthode RemoveEventListener()

La méthode removeEventListener() supprime les gestionnaires d'événements qui ont été attaché avec la méthode addEventListener() :

Exemple

element.removeEventListener("mousemove", myFunction);

Essayez-le vous-même →

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

Référence des objets d'événement HTML DOM

Pour une liste de tous les événements HTML DOM, consultez notre référence complète des objets d'événement HTML DOM.