Informatique


Le gestionnaire d'événements

Aller à

Référence générale

L'objet element du DOM contient la méthode permettant de placer un écouteur d'événement sur un objet element ou sur le document lui-même.

Pour les objets contenus dans le DOM cliquer ici et ensuite dans HTML DOM Reference choisir l'objet element.


addEventListener()

addEventListener() permet de placer un écouteur d'événement.
Il permet de préparer une balise ou le document lui-même à "capter" un événement et déclencher dans la foulée une fonction de callback.
On parle de fonction de callback car cette fonction est déclenchée par l'apparition de l'événement.

Lorsque l'événement est déclenché, la fonction de callback reçoit un paramètre "sourd" qui représente l'événement déclenché (click, mouseout, mouseover, etc.).
Ce paramètre "sourd" peut être récupéré au niveau de la fonction au moyen d'une variable dont le nom est au choix du programmeur.

Syntaxe
unelement.addEventListener("nom_événement",function(){},boolean)
ou
Syntaxe
unelement.addEventListener("nom_événement",mafonction,boolean)
  • nom_événement est le nom de l'événement que l'on veut "écouter", la liste des événement disponibles est diponible ici.
  • mafonction ou une fonction anonyme est le gestionnaire d'événement qui sera exécuté au moment où l'événement est déclenché
  • boolean est facultatif, c'est un booléen qui permet de choisir le sens de la propagation de l'événement
Première syntaxe
Démo
<body>
    <h1 id=maintitre>Un beau contenu</h1>
	<p>Et voilà...</p>
	<button id="mb1">Un grand clic pour une petite clac</button>
	<script>
	var bouton=document.querySelector("#mb1");
	bouton.addEventListener("click",retour);
	function retour(){alert("clac!");}
	</script>
</body>
Deuxième syntaxe
Démo
<body>
    <h1 id=maintitre>Un beau contenu</h1>
	<p>Et voilà...</p>
	<button id="mb1">Un grand clic pour une petite clac</button>
	<script>
	var bouton=document.querySelector("#mb1");
	bouton.addEventListener("click",function(){alert("clac!");});
	</script>
</body>

Et pourquoi pas avec la syntaxe suivante, avec une fonction arrow.

Démo
<body>
    <h1 id=maintitre>Un beau contenu</h1>
	<p>Et voilà...</p>
	<button id="mb1">Un grand clic pour une petite clac</button>
	<script>
	var bouton=document.querySelector("#mb1");
	bouton.addEventListener("click",()=> alert("clac!"));
	</script>
</body>

La méthode addEventListener() permet d'éviter d'inclure du code JS au niveau des balises HTML, ceci clarifie considérablement le code.


L'événement

Lorsque un événement est déclenché, une variable contenant celui-ci est envoyé à la fonction de callbak sous forme d'un objet PointerEvent.

Le nom de la variable de réception de l'objet PointerEvent est au choix du programmeur.

Démo
<body>
    <h1 id=maintitre>Quel événement?</h1>
	<p>Et voilà...</p>
	<script>
	var monPara=document.querySelector("p");
	monPara.addEventListener("click",maFct);
	function maFct(e){
		console.log(e);
		console.log(e.type);
		}
	</script>
</body>

removeEventListener()

removeEventListener() permet de supprimer un gestionnaire d'événement.

On passe en paramètres: l'événement à supprimer et le gestionnaire (la fonction de callback).

Démo
<body>
    <h1 id=maintitre>Un beau contenu</h1>
	<p>Et voilà...</p>
	<button id="mb1">Un grand clic pour une petite clac</button>
	<script>
	var bouton=document.querySelector("#mb1");
	bouton.addEventListener("click",mfct);
	function mfct(e){
		alert("clac");
		bouton.removeEventListener("click",mfct);
	}
	</script>
</body>

Capture et bouillonnement

Dans les 2 exemples suivants, le fait de cliquer sur la balise <span>, revient à cliquer également sur son conteneur qui est la balise <div>, ce qui implique qu'on a aussi cliqué sur son parent qui est la balise <body> ce qui signifie aussi qu'on a cliqué sur leur parent à tous, l'objet DOCUMENT.

Le flux de propagation de l'événement click évolue comme ceci:

  • Phase capture: l'événement se propage du haut vers le bas, c'est à dire de l'objet de plus haut niveau (dans la hiérarchie) à l'objet de plus bas niveau sur lequel la souris est placée au moment du déclenchement de l'événement. Cette phase s'appelle la capture.
  • Phase bouillonnement (bubbling): une fois que l'événement a atteint la cible, il se propage dans le sens inverse en remontant la hiérarchie jusqu'à atteindre l'objet document. Cette phase s'appelle le bouillonnement (bubbling en anglais).
  • d'après zendevs

La phase de capture et la phase de bouillonnement orientent la propagation de l'événement.

  • Le bouillonnement (bubbling en anglais), le booléen à false, propage l'événement de façon ascendante.
  • La capture (capture en anglais), le booléen à true, propage l'événement de façon descendante.

On utilise quasi toujours la valeur par défaut, c'est la valeur false pour laquelle la propagation de l'événement est ascendante, il s'agit du bouillonement (bubbling).

La phase de bouillonnement, le booléen à false
Démo
<head>
    <meta charset="utf-8">
    <title>Mon beau site web</title>
	<style>
		div{background:red;width:250px;height:50px;}
		span{background:yellow;}
	</style>

</head>
<body>
<div id="b1">
    <span id="b2">Un petit clic pour le bouillonnement.</span>
</div>
<script>
    var b1 = document.getElementById('b1'),
        b2 = document.getElementById('b2');
    
    b1.addEventListener('click', function() {
        alert("L'événement du div vient de se déclencher.");
    }, false);
  
    b2.addEventListener('click', function() {
        alert("L'événement du span vient de se déclencher.");
    }, false);
</script>
</body>
  • si on clique uniquement sur la div il n'y a que cet événement qui est activé
  • si on clique sur le span c'est d'abord le clic sur le span qui est activé et ensuite celui sur la div
La phase de capture, le booléen à true

Démo
<head>
    <meta charset="utf-8">
    <title>Mon beau site web</title>
	<style>
		div{background:red;width:250px;height:50px;}
		span{background:yellow;}
	</style>
</head>
<body>
<div id="c1">
    <span id="c2">Un petit clic pour la capture.</span>
</div>
<script>
    var c1 = document.getElementById('c1'),
        c2 = document.getElementById('c2');
        
  
    c1.addEventListener('click', function() {
        alert("L'événement du div vient de se déclencher.");
    }, true);
  
    c2.addEventListener('click', function() {
        alert("L'événement du span vient de se déclencher.");
    }, true);
</script>
</body>

On constate:

  • si on clique uniquement sur la div il n'y a que cet événement qui est activé
  • si on clique sur le span c'est d'abord le clic sur la div qui est activé et ensuite celui sur le span

Stopper la propagation de l'événement

stopPropagation() permet de stopper la propagation d'un événement, c'est une méthode de l'objet event, c'est bien un événement qui est stoppé!

Démo
<style>
        div#container {
            padding:10px;
            border:1px solid #999;            
        }
        div#container div {
            padding:5px;
            margin:5px;
            display:inline-block;
            border:1px solid #999;        
        } 
</style>
</head>
<body>
    <h1>Cliquez sur les 2 div et observez la propagation de l'événement</h1>
    <div id="container">
        <div id="click1">Cliquez sur div#click1</div>
        <div id="click2">Cliquez sur div#click2</div>
    </div>
</body>
<script>
var container=document.getElementById("container");
var click1=document.getElementById("click1");
var click2=document.getElementById("click2");

	document.body.addEventListener("click", function(e) {
	console.log("Le body a reçu l'événement");
	});
	
	container.addEventListener("click", function(e)	{
	console.log("La division container a reçu l'événement");
	});
	
	click1.addEventListener("click", function(e)	{
	console.log("Le clic sur la division click1 se propage du plus particulier vers le plus général");
	});
	
	click2.addEventListener("click", function(e) {
	e.stopPropagation();
	console.log("Le clic sur la division click2 ne se propage pas");
	});
</script>

On remarque également:

  • On a placé un écouteur sur la div "container", si on clique dessus on déclenche l'événement à partir de cette div et on constate que la propagation remonte.
  • On a placé un écouteur sur le body, si on clique dessus on déclenche l'événement à partir du body, et comme le body est au sommet de la pyramide il n'y a que lui qui reçoit l'événement.


this

On peut bien sûr utiliser this pour faire référence à l'élément courant.
L'élément courant est l'élément sur lequel on a attaché un gestionnaire d'événement.

Démo
<body>
    <h1 id=maintitre>Un beau contenu</h1>
	<p>Et voilà...</p>
	<p id=res></p>
	<button id="mb1">Un grand clic pour une petite clac</button>
	<script>
	var bouton=document.querySelector("#mb1");
	bouton.addEventListener("click",mfct);
	function mfct(e){
		alert("clac");
		resultat.innerHTML=this.id;
		this.removeEventListener("click",mfct);
	}
	</script>
</body>