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.

A quoi sert cet objet ? À 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.

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.

Pour le détail cliquer ici.

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

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

Démo
<body>
    <h1 id=maintitre>Un beau contenu</h1>
	<div id=d1></div>
		<p>Et voilà...</p>
	</div>
	<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>

e est un objet MouseEvent.


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>
	</div>
	<script>
	var dec=document.querySelector("p");
	dec.addEventListener("click",function(e){
		document.querySelector("#d1").innerHTML=e.type;
	});
	
	</script>
</body>

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.

e.target est l'élément qui a été ciblé, on récupère son attribut id en faisant e.terget.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>
	</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.

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