Mootools en 30 jours : jour 5 - les évènements

I. Introduction à la Gestion des évènements dans Mootools 1.2

Si vous ne l'avez pas encore fait, assurez-vous d'avoir lu les autres tutoriels Mootools 1.2 de la série des 30 jours.

Bienvenue dans le 5ème Jour des 30 Jours de Mootools. Dans le dernier tutoriel nous avons vu différentes façons de créer et utiliser les fonctions avec Mootools 1.2. L'étape suivante est de jeter un oeil aux évènements. Comme les sélecteurs, les évènements sont une partie essentielle de la création d' interfaces  intéractives. Quand vous avez la main sur un élément, il v. Dans le dernier tutoriel nous avons vu différentess façons de créer et utiliser les fonctions avec Mootools 1.2. L'étape suivante est de jeter un oeil aux évènements. Comme les sélecteurs, les évènements sont une partie essentielle de la création d' interfaces  intéractives. Quand vous avez la main sur un élément, il vous faut ensuite décider quelle action causera quel effet. Laissons les effets pour un prochain tutoriel, voyons l'étape intermédiaire et explorons des évènements communs.

II. Explications

Un clic gauche simple

Le clic gauche simple est l'évènement le plus commun dans le développement web. Les liens Hypertextes reconnaissent l'évènement click et vous envoient sur une autre URL. Mootools peut reconnaître l'évènement click sur d'autres éléments DOM, et vous donne plus de flexibilité dans le design et les fonctionnalités. La première étape est d'ajouter un évènement click sur un élement :

//$('id_name') définit l'element
//.addEvent ajoute l'évènement
//('click') définit le type de l'évènement
$('id_name').addEvent('click', function(){
//mettez ici tout ce que vous voulez qu'il se passe après un click
alert('cet element a maintenant un evenement click');
});

Vous pouvez faire la même chose en séparant la fonction du .addEvent();.

var clickFunction = function(){
//mettez ce que vous voulez qu'il se passe ici
alert('cet element a maintenant un evenement click');
}
 
window.addEvent('domready', function() {
$('id_name').addEvent('click', clickFunction);
});



Note: Tout comme l'évènement click est reconnu par les liens hypertextes, L'évènement click de Mootools est reconnu sur le “mouse up,” ce qui signifie lorsque relâchez le bouton gauche de la souris, et non lorsque vous appyez dessus. C'est fait pour donner aux utilisateurs la possibilité de changer d'avis en glissant le curseur de la souris en dehors de l'élément cliqué avant de relâcher le bouton de la souris.

Mouse Enter & Mouse Leave

Les liens hypertextes reconnaissent aussi les évènements “hover”, quand le curseur est sur un élément anchor (lien). Avec Mootools, vous pouvez ajouter un évènement hover à d'autres éléments DOM. En les coupant en mouseenter et mouseleave, vous avez un plus grand contrôle sur la manipulation des DOM suivant les actions des utilisateurs.

Comme nous l'avons fait juste avant, la première chose à faire est d'attacher un évènement à un élément

var mouseEnterFunction = function(){
//mettez ce que vous voulez qu'il se passe ici
alert('cet element peut maintenant reconnaitre l'evenement mouse enter');
}
 
window.addEvent('domready', function() {
$('id_name').addEvent('mouseenter', mouseEnterFunction);
});

Mouseleave fonctionne de la même façon . Cet évènement survient quand le curseur quitte un élément.

var mouseLeaveFunction = function(){
//mettez ce que vous voulez qu'il se passe ici
alert('cet element peut maintenant reconnaitre l'evenement mouse leave');
}
 
window.addEvent('domready', function() {
$('id_name').addEvent('mouseleave', mouseLeaveFunction);
});


Supprimer un Evènement

Parfois vous aurez besoin de retirer un évènement d'un élément quand il n'y a plus besoin de celui-ci. Supprimer un évènement est aussi facile que d'en ajouter un, c'est même une structure similaire.

//fonctionne comme les exemples précédents, remplacez juste .addEvent par .removeEvent
$('id_name').removeEvent('mouseleave', mouseLeaveFunction);


Touches du clavier Dans les Textarea ou Input

Mootools vous permet aussi d'identifier les frappes au clavier dans les textareas et inputs. La syntaxe est la même que ce que nous avons vu juste avant :

var keydownEventFunction = function () {
alert('Ce textarea a maintenant un évènement identifiant les frappes au clavier');
};
 
window.addEvent('domready', function() {
$('myTextarea').addEvent('keydown', keydownEventFunction);
});

Le code ci-dessus identifiera toutes les touches tapées au clavier. Pour cibler une touche en particulier, il vous faudra ajouter un paramètre et utiliser la condition if :

//remarque le "event" en paramètre de la fonction
var keyStrokeEvent = function(event){
// cela signifie, "si la touche pressée est égal à "k," faire les choses suivantes."
if (event.key == "k") {
alert("Vous avez appuyé sur la touche k du clavier.")
};
}
 
window.addEvent('domready', function() {
$('myTextarea').addEvent('keydown', keyStrokeEvent);
});

Pour d'autres contrôles, tels que la touche “shift” et “control,” la syntaxe est légèrement différente :

var keyStrokeEvent = function(event){
// ce signifie, "si la touche "shift," a été pressée, faire les choses suivantes."
if (event.shift) {
alert("Vous avez tapé shift.")
};
}
 
window.addEvent('domready', function() {
$('myTextarea').addEvent('keydown', keyStrokeEvent);
});




Exemple

Voici quelques exemples de code de ce que nous avons vu précédemment :

Note: essayez de cliquer sur l'exemple de click simple, mais au lieu de relâcher le bouton gauche de votre souris,  déplacez votre curseur en dehors du block en maintenant le bouton de la souris appuyé. Remarquez alors que cela n'entraine PAS d'évènement click.

var keyStrokeEvent = function(event){
// cela signifie, "si la touche pressée est "k," faire les choses suivantes."
if (event.key == 'k') {
alert("ce Mootorial vous a été proposé par la lettre 'k.'")
};
}
 
var mouseLeaveFunction = function(){
//mettez ce que vous voulez ici
alert('cet element reconnait maintenant l\'évènement mouse leave');
}
 
var mouseEnterFunction = function(){
//mettez ce que vous voulez ici
alert('cet element reconnait maintenant l\'évènement mouse enter');
}
 
var clickFunction = function(){
//mettez ce que vous voulez qu'il se passe ici
alert('cet element reconnait maintenant l\'évènement click');
}
 
window.addEvent('domready', function() {
$('click').addEvent('click', clickFunction);
$('enter').addEvent('mouseenter', mouseEnterFunction);
$('leave').addEvent('mouseleave', mouseLeaveFunction);
$('keyevent').addEvent('keydown', keyStrokeEvent);
});
Simple Click Gauche


Mouse Enter


Mouse Leave


Simple Click Gauche

 

Mouse Enter

 

Mouse Leave

III. Conclusion du tutorial

Pour en savoir plus…

Télécharger un zip contenant tout ce qu'il vous faut pour débuter

Il inclut le noyau Mootools 1.2, un fichier javascript externe, une simple page html et un fichier css.

A propos des Evènements

Mootools vous donne encore plus de contrôle sur les évènements que ce que nous avons vu ici. Pour en savoir plus, parcourez les liens suivants :

Le tutoriel de demain - HTML

Jour 6 - Manipuler les éléments HTML