ICTFF Section Informatique

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.
Une balise ou le document lui-même peut alors "entendre" un événement et déclencher une fonction de callback.

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)

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>

Bubling.

Quand un événement est entendu par un élément de la page, celui-ci remonte dans le code et est donc susceptible d'être entendu par le parent, comme une bulle remonte à la surface.

Démo
<head>
<style>
#d1,#d2,#d3{margin:20px;}
#d1{background:red; width:300px;height:200px}
#d2{background:salmon; width:200px;height:150px}
#d3{background:yellow; width:150px;height:75px}
</style>
</head>
<body>
<h1 id=maintitre>L'événement est remontant</h1>
<div id=d1>
 Une belle division 1.
   <div id=d2>
    Une belle division 2.
     <div id=d3>
	   Une belle division 3
     </div>
   </div>
</div>
<div id=res></div>
<script>
var res=document.querySelector("#res");
var div1=document.querySelector("#d1");
var div2=document.querySelector("#d2");
var div3=document.querySelector("#d3");
div1.addEventListener("click",()=>console.log("Tu as cliqué sur la div1"));
div2.addEventListener("click",()=>console.log("Tu as cliqué sur la div2"));
div3.addEventListener("click",()=>console.log("Tu as cliqué sur la div3"));
</script>
</body>

Bubling et capture

Le bubling représente le comportement par défaut, la propagation d'un événement est remontant, le 3e argument est à false.

Le capture inverse le sens de propagation de l'événement, le 3e argument du addEventListener est à true.

Démo
<head>
<style>
#d1,#d2,#d3{margin:20px;}
#d1{background:red; width:300px;height:200px}
#d2{background:salmon; width:200px;height:150px}
#d3{background:yellow; width:150px;height:75px}
</style>
</head>
<body>
<h1 id=maintitre>L'événement est remontant</h1>
<div id=d1>
 Une belle division 1.
   <div id=d2>
    Une belle division 2.
     <div id=d3>
	   Une belle division 3
     </div>
   </div>
</div>
<div id=res></div>
<script>
var res=document.querySelector("#res");
var div1=document.querySelector("#d1");
var div2=document.querySelector("#d2");
var div3=document.querySelector("#d3");
div1.addEventListener("click",()=>console.log("Tu as cliqué sur la div1"),true);
div2.addEventListener("click",()=>console.log("Tu as cliqué sur la div2"),true);
div3.addEventListener("click",()=>console.log("Tu as cliqué sur la div3"),true);
</script>
</body>

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.

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>

Le gestionnaire d'événements

Aller à