Informatique


L'objet Event

Aller à

L'objet Event

L'objet Event est créé automatiquement par Javascript, il est associé à l'objet qui a déclenché l'événement.

Cet objet sert à fournir des informations sur l'événement déclenché. Par exemple, récupérer quelles sont les touches du clavier enfoncées, les coordonnées du curseur, l'élément qui a déclenché l'événement etc.

Cet objet Event contient une série d'objets qui héritent de ses propriétés et méthodes, par exemples:

  • MouseEvent
  • KeyboardEvent
  • UiEvent
  • ClipboardEvent
  • InputEvent
  • FocusEvent
  • etc.

Un objet Event est passé en paramètre à la fonction de callback, il n'est pas nécessaire de l'indiquer sauf si on veut avoir de l'information concernant l'événement, le nom de la variable qui va recevoir l'objet Event est au choix du programmeur.

L'objet Event n’est accessible que durant le déclenchement d’un évènement, il faut donc y accéder au sein du gestionnaire d'événement représenté par la fonction de callback.

La méthode addEventlistener doit être privilégié par rapport à l'appel de l'événement au sein de la balise, cette technique est obsolète.

Premier exemple: récupérer la touche pressée, un KeyboardEvent
Démo
<body>
<p id=brol>Touche une touche pupuce...</p>
<p id="demo"></p>
<script>
var touche = document.getElementsByTagName("body");
touche[0].addEventListener("keydown",affictexte)
function affictexte(e) {
	x=e.code;
    document.getElementById("demo").innerHTML = "Vous avez pressé la touche " + x;
}
</script>
</body>

e est un objet KeyboardEvent.

Deuxième exemple: le click, un MouseEvent
Démo
<body>
    <h1 id=maintitre>Un beau contenu</h1>
	<div id=d1></div>
	<p>Et voilà...</p>
	<script>
	var dec=document.querySelector("p"),
	res=document.querySelector("#d1");
	dec.addEventListener("click",function(e){
		res.innerHTML=e;
	});
	</script>
</body>

e est un objet MouseEvent.

Troisième exemple: input, un InputEvent
Démo
<body>
<p>Récupérer en direct ce que l'utilisateur écrit dans un input.</p>
<input type="text" id="myInput">
<p id="demo"></p>
<script>
var texte = document.getElementById("myInput");
texte.addEventListener("input",affictexte)
function affictexte(e) {
	x=texte.value;
	document.getElementById("demo").innerHTML = "Vous écrivez: " + x;
}
</script>
</body>

e est un objet InputEvent.

Quatrième exemple: focus, un FocusEvent
Démo
<body>
<input id=brol>
<p id="demo"></p>
<script>
var moninput = document.getElementById("brol");
moninput.addEventListener("focus",affictexte)
function affictexte(e) {
	moninput.style.background = "red";
}
</script>
</body>

e est un objet FocusEvent.


Tous les événements possibles

Ce lien permet d'accéder à tous les types d'événements accessibles.W3School.


Récupérer toutes les proprétés de l'objet Event

Pour illustrer les propriétés d'un objet Event, prenons pour exemple le click, un objet MouseEvent.

Démo
<body>
    <h1 id=maintitre>Un beau contenu</h1>
	<div id=d1></div>
	<p>Et voilà...</p>
	<script>
	var dec=document.querySelector("p"),
	res=document.querySelector("#d1");
	dec.addEventListener("click",function(e){
		for(var propriete in e){
		res.innerHTML+=propriete+" || "+e[propriete]+"<br>";
		}
	});
	</script>
</body>

Récupérer le nom de l'événement

Dans le script suivant on affiche l'événement avec type.

Démo
<body>
    <h1 id=maintitre>Un beau contenu</h1>
	<div id=d1></div>
	<p>Et voilà...</p>
	<script>
	var dec=document.querySelector("p");
	dec.addEventListener("click",function(e){
		document.querySelector("#d1").innerHTML=e.type;
	});
	
	</script>
</body>

e est un objet MouseEvent.


La cible de l'événement

Dans le script suivant on affiche le type d'élément sur lequel il a été déclenché avec target.
target retourne l'élément (objet) enfant le plus profond (du plus bas niveau hiérarchique) survolé lors du déclenchement de l'événement.

Donc e.target renvoie un type Element sur lequel on peut appliquer évidemment toutes les propriétés et méthodes propres à ces objets.

e.target est l'élément qui a été ciblé, on récupère son attribut id en faisant e.target.id, pour rappel lorsqu'on veut atteidre un attribut d'un objet Element on utilise directement le nom de l'attribut.

Démo
<head>
    <meta charset="utf-8">
    <title>Mon beau site web</title>
</head>
<style>
		#plouc {width:100px;height:120px;background:black}
		#petitplouc {width:75px;height:90px;background:red}
		p {width:35px;height:35px;background:yellow}
</style>
<body>
    <h1 id=maintitre>Un beau contenu</h1>
	<div id=d1></div>
		<div id=plouc>
			<div id=petitplouc>
				<p id=p1>P1</p>
				<p id=p2>P2</p>
			</div>
		</div>
	<script>
	var dec=document.querySelector("#plouc");
	dec.addEventListener("click",function(e){
		document.querySelector("#d1").innerHTML=e.target.id;
	});
	</script>
</body>

L'élément à l'origine du déclenchement de l'événement

Certains événements appliqués à un élément parent peuvent se propager d'eux-mêmes aux éléments enfants ; c'est le cas des événements mouseover, mouseout, mousemove, click… ainsi que d'autres événements moins utilisés.

currentTarget renvoie l'élément qui a déclenché l'événement, #plouc dans l'exemple.
Donc currentTarget renvoie un type Element et récupère l'élément qui est à l'origine de l'événement, dans notre cas ce sera #plouc car on a placé l'écouteur sur celui-ci.

Démo
<head>
    <meta charset="utf-8">
    <title>Mon beau site web</title>
	<style>
		#plouc {width:100px;height:120px;background:black}
		#petitplouc {width:75px;height:90px;background:red}
		p {width:35px;height:35px;background:yellow}
	</style>
</head>
<body>
    <h1 id=maintitre>Un beau contenu</h1>
	<div id=d1></div>
		<div id=plouc>
			<div id=petitplouc>
				<p id=p1>P1</p>
				<p id=p2>P2</p>
			</div>
		</div>
	<script>
	var dec=document.querySelector("#plouc");
	dec.addEventListener("click",function(e){
		document.querySelector("#d1").innerHTML="A l'origine de l'événement: "+e.currentTarget.id;
	});
	</script>
	</body>

Modifier le style de la cible

On va faire disparaître des paragraphes.

Démo
<body>
<p>Si tu me cliques je disparais!</p>
<p>Si tu me cliques je disparais!</p>
<p>Si tu me cliques je disparais!</p>
<p>Si tu me cliques je disparais!</p>
<p>Si tu me cliques je disparais!</p>
<p>Si tu me cliques je disparais!</p>
<p>Si tu me cliques je disparais!</p>
<script>
var ps = document.getElementsByTagName('p');
for(var i = 0; i < ps.length; i++){
	ps[i].addEventListener('click', evapore);
}
function evapore(e){
  e.target.style.visibility = "hidden";
  //this.style.visibility = "hidden"; //on aurait pu écrire...
}
</script></body>

Récupérer le contenu d'un élément de formulaire

On utilisera l'attribut value de l'élément.

Démo
<head>
    <meta charset="utf-8">
    <title>Mon beau site web</title>
</head>

<body>
    <h1 id=maintitre>Un beau contenu</h1>
    <p id=res></p>
	<form id=send action=# method=post>
		Nom:<input id=nom type=text>
		<input  type=submit value="Envoyer">
	</form>
	<script>
	var f1=document.querySelector("#send"),
		resultat=document.querySelector("#res");
	
	f1.addEventListener("submit",mfct);
	function mfct(e){
		var test;
		if(test=document.getElementById("nom").value){
			alert(document.getElementById("nom").value);
			alert("Votre formulaire est sur le pont d'être envoyé!")
			return true;
		}
		else{
			alert("Veuiller remplir le champ svp!");
			return false;
		}
	}
	</script>
</body>