Informatique


Le gestionnaire d'événements

Aller à

addEventListener()

Il existe plusieurs façon de détecter un événements dans un document html, le gestionnaire d'événement:

  • sépare le code html du code JS
  • centralise la déclaration des événement dans le JS
  • permet d'être certain que les fichiers externes sont bien chargés avant les déclenchements d'événements

La méthode addEventListener() de l'objet EventTarget permet d'associer à un élément du document un gestionnaire d'événement (handler). Le gestionnaire d'événement est une fonction qui sera exécutée lorsque l'événement est déclenché.

En d'autres termes il s'agit d'un "écouteur" qui, lorsqu'il détecte l'événement, déclenche automatiquement une fonction de retour (callback) en réponse à l'événement.

Les objets Element, document, et window sont les objets cibles les plus communs, cependant d'autres objets peuvent être utilisés comme événements cibles (par exemple XMLHttpRequest).

Pour le détail cliquer ici.

La méthode addEventListener() permet d'éviter d'inclure du code JS au niveau des balises HTML, ceci clarifie considérablement le code.
La méthode addEventListener() permet en plus d'associer plusieurs gestionnaire à un seul élément.
Il n'y a donc plus aucune raison pour continuer à utiliser les anciennes pratiques.

Syntaxe
	addEventListener("nom_événement",mafonction,boolean);
	
  • nom_événement est le nom de l'événement que l'on veut "écouter"
  • mafonction 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
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>

Souvent vous verrez la syntaxe suivante, elle est absolument identique mais au lieu d'appeler la fonction retour on passe une fonction anonyme en deuxième paramètre.

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>

Capture et bouillonnement

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

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

On utilise quasi toujours la valeur par défaut, c'est la valeur false.

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
La phase de bouillonement, 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

Stopper la propagation de l'événement

stopPropagation() permet de stopper la propagation d'un événement.

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.


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>

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>