Evenements

La gestion des Evenements, telle que décrite dans la documentation du Mozilla Developper Network permet l'enregistrement des évènements sur les nœuds du DOM.

Si vous n'êtes pas familier avec la notion de DOM, faites au moins le début des exercices.

Les gestionnaires et “écouteurs” (listeners) d'évènements permettent –entre autres– de déclencher des actions suite à une interaction de l'utilisateur.

addEventListener

addEventListener permet de déclencher une action lorsqu'un événement est lancé sur un élément du DOM, par exemple quand on clique sur un lien.

click alert

Faites en sorte que quand on clique sur le lien, ça affiche “bonjour” dans un alert.

00_events_click.html
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="utf-8" />
<title>events | click</title>
</head>
<body>
 
<a id="trigger" href="#">ceci est un lien</a>
 
 
<script>
document.getElementById("trigger").addEventListener("click",function(e){
	// du code ici
});	
</script>
</body>
</html>

click console.log

console.log() permet d'afficher un message dans la console de javascript.

console.log("hello");

En utilisant l'exercice précédent, au lieu d'afficher un message en alert, affichez-le dans la console.

mousemove

L'événement mousemove permet de capturer l'événement de déplacement de souris au-dessus de l'événment choisi.

Si l'élément est document, alors on capture les déplacements de souris au-dessus de la page HTML.

A partir de l'exercice suivant, affichez un message en console log à chaque fois que la souris bouge.

01_events_mousemove.html
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="utf-8" />
<title>events | mousemove</title>
</head>
<body>
 
<h1>Passez la souris au-dessus du document</h1>
 
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor 
incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud 
exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute 
rure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla 
ariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia 
eserunt mollit anim id est laborum.</p>
 
<script>
document.addEventListener("mousemove",function(e){
 
});	
</script>
 
</body>
</html>

mouseover et mouseout

L'événement mouseover capture les déplacements de la souris quand elle survole l'élément fixé. mouseout capture l'événement de déplacement de la souris qui quitte l'élément.

Le code ci-dessous ne capture que les événements mouseover ajoutez-y un événement mouseout qui affiche en cpnsole.log quand la souris quitte l'élément.

02_events_over_out.html
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="utf-8" />
<title>events | mouseover</title>
</head>
<body>
 
<h1>Survolez le paragraphe</h1>
 
<p id="parag">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do 
eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis 
aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat 
nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui 
officia deserunt mollit anim id est laborum.</p>
 
<script>
document.getElementById("parag").addEventListener("mouseover",function(e){
	console.log("là on survole");
});	
</script>
 
</body>
</html>

keyup

L'événement keyup permet de savoir si une touche du clavier a été pressée.

Il existe 3 événements pour capturer les touches du clavier : keydown, keypress et keyup.

Dans cet exercice, capturez les touches qui ont été pressées lors de la consultation de la page. A chaque fois qu'on appuie sur une touche, faites un console.log qui affiche “vous avez pressé une touche”.

03_events_keyup.html
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="utf-8" />
<title>events | keyup</title>
</head>
<body>
 
<h1>Appuyez sur une touche</h1>
 
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor 
	incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud 
	exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure 
	dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. 
	Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit 
	anim id est laborum.
</p>
 
 
<script>
// ici, c'est à vous de jouer
</script>
 
</body>
</html>

load

Il existe aussi des événements qui ne vont pas directement écouter des interactions avec l'utilisateur, parmi ceux-ci, le plus fréquent est l'événement load qui permet de savoir si un document est chargé.

Ceci permet à javascript de se lancer uniquement quand la age (donc le DOM) est chargé.

Par exemple, ce code ne peut pas fonctionner parce que au moment où le javascript est lancé, le paragraphe parag n'existe pas encore.

04_events_no_load.html
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="utf-8" />
<title>events | no load</title>
 
<script>
	document.getElementById("parag").innerHTML = "En fait si, ça marche";
</script>
 
</head>
<body>
 
<h1>Ca ne marche pas</h1>
 
 
<p>
	Il est recommandé de placer le javascript dans le &gt;head&lt;, or, si on déclenche
	du javascript qui interragit avec le DOM avant que celui-ci soit chargé, ça plante.
</p>
 
 
<p id="parag">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor 
	incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud 
	exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure 
	dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. 
	Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit 
	anim id est laborum.
</p>
 
</body>
</html>

Vous pouvez solutionner ce problème en déplaçant le <script></script> en bas du document, juste avant le </body>, essayez.

L'événement load est spécifié dans un addEvenetListener qui s'applique à window et non pas à document.

window.addEventListener("load", function(){
 
	// ici je met tout le javascript que je veux 
	// parce que ici j'ai accès au DOM
 
	// par exemple :	
	document.getElementById("monID").innerHTML = "j'ai accès au dom";
});
05_events_load.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>events | load</title>
 
<script>
 
// codez ici
// déplacer le script, c'est tricher
 
 
 
</script>
 
</head>
<body>
 
<h1>Ca devrait marcher</h1>
 
 
<p>
	Il est recommandé de placer le javascript dans le &gt;head&lt;, or, si on déclenche
	du javascript qui interragit avec le DOM avant que celui-ci soit chargé, ça plante.
</p>
 
 
<p id="parag">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor 
	incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud 
	exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure 
	dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. 
	Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit 
	anim id est laborum.
</p>
 
</body>
</html>

submit

On peut aussi capturer des événements submit des formulaires HTML.

Par exemple, pour un formulaire qui aurait pour id newsletter

<form  method="get" id="newsletter">
	<input type="text" name="email">
	<p><input type="submit" value="Subscribe"></p>
</form>

On peut capturer un événement de Submit (lorsque le formulaire est envoyé) avec un code du type.

document.getElementById("newsletter").addEventListener("submit", function(){
	// verification des champs avant envoi du formulaire
});

Event

On peut capturer des informations sur un événement. Par convention, on appelle l'event e. Sur le wiki de Mozilla Developper Network, vous pouvez consulter la documentation de event

e

Pour capturer un événement, il suffit de spécifier une variable e dans les parenthèses de la fonction anonyme appelée par le addEventListener.

Avant : sans capture d'événement

document.addEventListener('click',function(){
	// des trucs
});

Après : avec capture d'événement

document.addEventListener('click',function(e){
	// des trucs qui peuvent utiliser e
});

Dans l'exemple ci-dessous, observez l'événement capturé par le addEventListener de click.

06_events_click_capture.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>events | click capture</title>
</head>
<body>
 
<a id="trigger" href="#">ceci est un lien</a>
 
 
<script>
document.getElementById("trigger").addEventListener('click',function(e){
	console.log(e);
});	
</script>
</body>
</html>

(oui, je sais, j'aurais pu faire un load).

e mouse capture

On peut capturer plein d'événements, ici on va capturer des événements de souris. On pourra notamment utiliser e.pageX et e.pageY pour connaitre les positions en X et Y du curseur.

Cet exemple ci-dessous utilise l'événement click, capturez l'événement mousemove et affichez les coordonnées x et y de la souris.

07_events_mouse_capturexy.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>events | xapture xy</title>
</head>
<body>
 
<h1>Cliquez où vous voulez dans cette page</h1>
 
<p>Faites la même chose pour suivre la position X 
	et la position Y du curseur dans un événement
	de déplacement de souris
</p>
 
<script>
document.addEventListener('click',function(e){
	console.log(e.pageX);
});	
</script>
</body>
</html>

Optionnel : curseur suivi

Un div reste collé à la souris. Créez une page avec un div qui a pour id “cursor” et qui reste collée à la souris quand elle se déplace.

Pensez à mettre du css pour que votre #cursor soit en position:absolute ou position:fixed.

document.getElementById("cursor").style.left = e.posX;

e key capture

On peut aussi capturer les événements du clavier, évidemment celles-ci n'ont pas de posX ni posY mais d'autres propriétés dont : charCode qui donne le code de la lettre keyCode qui donne le code de la touche (si elle n'est pas une lettre, comme les flêches ou ENTER) et metaKey, shiftKey, ctrlKey, altKey… qui permettent de savois s'il s'agit d'une combinaison qui utilise une touche d'option.

Meta, c'est le nom de la touche “windows”.

document.addEventListener('keypress',function(e){
	console.log('une touche a été pressée');
	console.log(e.charCode);
	console.log(e.keyCode);
});

Dans le code suivant, changez le contenu de parag quand la touche A est pressée.

08_events_keypress.html
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="utf-8" />
<title>events | keypress</title>
</head>
<body>
 
<h1>Surtout n'appuyez pas sur A</h1>
 
<p id="parag">
	Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do 
	eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim 
	ad minim veniam, quis nostrud exercitation ullamco laboris nisi 
	ut  aliquip ex ea commodo consequat. Duis aute irure dolor in 
	reprehenderit in voluptate velit esse cillum dolore eu fugiat 
	nulla pariatur. Excepteur sint occaecat cupidatat non proident, 
	sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
 
<script>
 
</script>
</body>
</html>

Optionnel : vaisseau spatial

En utilisant les flêches, déplacez votre vaisseau spatial sur le document

C'est un peu la même logique que pour le suivi de curseur, à ceci près que la nouvelle position du vaisseau est calculée d'après la position actuelle.

var ship = document.getElementById("spaceship");
ship.style.left = ship.style.left + 10;

Optionnel : konami (difficle)

Codez un konami code : quand la combinaison de touches ↑↑↓↓←→←→ B A est pressée, un vélociraptor apparaît à l'écran !

e.preventDefault

L'événement e peut avoir des propriétés, mais aussi des méthodes. La méthode la plus utilisée dans ce cas, c'est e.preventDefault() qui permet d'annuler le comportement par défaut d'un événement.

Par exemple, si j'ai un lien classique, en cliquant dessus, je vais suivre le lien.

<a href="http://freelancis.net">freelancis</a>

Or, je peux désactiver ceci en spécifiant e.preventDefault() au comportement click

var link =  document.getElementById("link");
link.addEventListener("click", function(e){
	e.preventDefault();
})

Désactivez les liens de la page

Pour faire cet exercice, vous devez avoir réussi les exercices du début de la page DOM gebcn_et_boucle_for et gebtn_length.

Désactivez tous les liens de la page.

09_events_preventdefault.html
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="utf-8" />
<title>events | preventdefault</title>
</head>
<body>
 
<h1>N'allez pas sur les liens</h1>
 
<ul>
	<li><a href="http://developer.mozilla.org" 
		title="Référence pour webdesigners">Mozilla Developper network</a></li>
	<li><a href="http://alistapart.com/" 
		title="Bonnes pratiques pour webdesigners">A list Apart</a></li>
	<li><a href="http://alsacreations.fr/"
		title="Communauté de webdesigners francophones">Alsa creations</a></li>
	<li><a href="http://www.pompage.net/"
		title="Traductions d'articles de référence">Pompage</a></li>
	<li><a href="http://fetenationaleduslip.free.fr/"
		title="Un vieux site">la fête nationalie du slip</a></li>
	<li><a href="http://www.staggeringbeauty.com/"
		title="Secoue le zigouigoui">Staggering beauty</a></li>
</ul>
 
</body>
</html>

Confirmez avant de surfer

La méthode window.confirm permet de créer une fenêtre (moche) de confirmation. Elle s'utilise ainsi:

if( confirm("voulez-vous un bonbon ?") ){
	alert("hop, un bonbon");
}
else{
	alert("un chocolat alors ?");
}

En utilisant cette méthode demandez à l'utilisateur de confirmer s'il clique sur un lien.

La disparition

Désactivez l'usage de la lettre e.

(bonus : pensez aussi à “é”, “è”, “ê”, “É”, “È” et “Ê”).

10_events_disparition.html
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="utf-8" />
<title>events | la disparition</title>
<style>
	body{
		font-family:Georgia;
		margin:1em auto;
		background-color:#efece6;
		color:#333;
	}
	textarea, input{
		color:#333;
		font-family:'Monaco', 'Menlo', 'Ubuntu Mono', 'Consolas', 'source-code-pro', monospace;
		font-size:1em;
	}
	.wrapper{
		background-color:#fff;
		box-shadow:rgba(0,0,0,.23) 0 10px 15px;
		width:75%;
		padding:20px;
		border-bottom:2px solid #c00;
		margin:auto;
 
	}
	h1{font-weight:normal}
	textarea{
		width:98%;
		height:15em;
		padding:1%;
	}
	.submit {
		text-align:right;
	}
</style>
 
<script>
 
</script>
</head>
<body>
<div class="wrapper">
	<h1>&Eacute;crivez votre livre ici</h1>
 
	<form method="get">
		<textarea name="book" id="book">
Il fallait un grand art, un art hors du commun, pour fourbir tout un roman sans ça.</textarea>
		<p class="submit"><input type="submit" value="Publiez &rarr;"></p>
	</form>
	Vous ne pouvez pas écrire de lettre "e", peut-être écrirez-vous la suite de
	<a href="http://fr.wikipedia.org/wiki/La_Disparition_(roman)">La Disparition</a>
</div>
</body>
</html>

Newsletter

Vérifiez bien que tous les champs soient saisis avant d'envoyer la newsletter. S'il manque un renseignement, affichez un message d'erreur et utilisez e.preventDefault() pour éviter que le formulaire soit envoyé.

Pour récupérer la valeur d'un champ, vous pouvez utiliser

document.getElementById('email').value

Pour savoir quelle est la longueur du champ, utilisez length

document.getElementById('email').value.length
11_events_submit.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>events | newsletter</title>
<style>/* style is classy */</style>
<script>
 
</script>
</head>
<body>
<div class="wrapper">
	<h1>Inscrivez-vous à la newsletter</h1>
 
	<form method="get">
		<p>
			<label for="name">name</label>
			<input type="text" name="name" value="" id="name">
		</p>
		<p>
			<label for="email">email</label>
			<input type="email" name="email" value="" id="email">
		</p>
		<p class="submit">
			<input type="submit" value="Subscribe &rarr;">
		</p>
	</form>
</div>
</body>
</html>
ressources/javascript/events_fr.txt · Last modified: 2013/06/16 22:51 (external edit)
 
 
Creative Commons License Powered by PHP Valid XHTML 1.0 April