MooTools - Gestion des événements
Comme les sélecteurs, la gestion des événements est également un concept essentiel de MooTools. Ce concept est utilisé pour créer des événements et des actions pour des événements. Nous devons également comprendre les actions et leurs effets. Essayons quelques événements dans ce chapitre.
Clic gauche simple
L'événement le plus courant dans le développement Web est le simple clic gauche. Par exemple, Hyperlink reconnaît un événement de clic unique et vous amène à un autre élément DOM. La première étape consiste à ajouter un événement de clic à l'élément DOM. Prenons un exemple qui ajoute un événement de clic au bouton. Lorsque vous cliquez sur ce bouton, un message s'affiche.
Exemple
<!DOCTYPE html>
<html>
<head>
<script type = "text/javascript" src = "MooTools-Core-1.6.0.js"></script>
<script type = "text/javascript" src = "MooTools-More-1.6.0.js"></script>
<script type = "text/javascript">
var clickFunction = function(){
//put whatever you want to happen in here
document.write('This button element recognizes the click event');
}
window.addEvent('domready', function() {
$('id_name').addEvent('click', clickFunction);
});
</script>
</head>
<body>
<input type = "button" id = "id_name" value = "click here"/>
</body>
</html>Vous recevrez la sortie suivante -
Production
Lorsque vous cliquez sur le bouton, vous obtenez le message suivant -
This button element recognizes the click eventEntrée de la souris et sortie de la souris
Mouse Enter et Mouse Leave sont les événements les plus courants dans la gestion des événements. L'action est appliquée en fonction de la position de la souris. Si la position de la souris est ENTRÉE dans l'élément DOM, elle appliquera une action. S'il quitte la zone des éléments DOM, il appliquera une autre action.
Prenons un exemple qui explique le fonctionnement de l'événement Entrée de la souris. Jetez un œil au code suivant.
Exemple
<!DOCTYPE html>
<html>
<head>
<script type = "text/javascript" src = "MooTools-Core-1.6.0.js"></script>
<script type = "text/javascript" src = "MooTools-More-1.6.0.js"></script>
<script type = "text/javascript">
var mouseEnterFunction = function(){
//put whatever you want to happen in here
$('result').set('html', "Recognizes the mouse enter event");
}
window.addEvent('domready', function() {
$('id_name').addEvent('mouseenter', mouseEnterFunction);
});
</script>
</head>
<body>
<input type = "button" id = "id_name" value = "Mouse Enter"/> <br/><br/>
<lable id = "result"></lable>
</body>
</html>Vous recevrez la sortie suivante -
Production
Si vous maintenez le pointeur de votre souris sur le bouton, vous obtiendrez le message suivant.
Recognizes the mouse enter eventPrenons un exemple qui explique le fonctionnement de l'événement Mouse Leave. Jetez un œil au code suivant.
Exemple
<!DOCTYPE html>
<html>
<head>
<script type = "text/javascript" src = "MooTools-Core-1.6.0.js"></script>
<script type = "text/javascript" src = "MooTools-More-1.6.0.js"></script>
<script type = "text/javascript">
var mouseLeaveFunction = function(){
//put whatever you want to happen in here
$('result').set('html', "Recognizes the mouse leave event");
}
window.addEvent('domready', function() {
$('id_name').addEvent('mouseleave', mouseLeaveFunction);
});
</script>
</head>
<body>
<input type = "button" id = "id_name" value = "Mouse Leave"/><br/>
<lable id = "result"></lable>
</body>
</html>Vous recevrez la sortie suivante -
Production
Si vous maintenez le pointeur de votre souris sur le bouton, vous obtiendrez le message suivant.
Recognizes the mouse leave eventSupprimer un événement
Cette méthode est utilisée pour supprimer un événement. La suppression d'un événement est aussi simple que l'ajout d'un événement et suit la même structure. Jetez un œil à la syntaxe suivante.
Syntaxe
//works just like the previous examplesuse .removeEvent method
$('id_name').removeEvent('mouseleave', mouseLeaveFunction);Les frappes comme entrée
MooTools peut reconnaître vos actions - le type d'entrée que vous avez donné via l'élément DOM. En utilisant lekeydown fonction, vous pouvez lire chaque clé à partir de l'élément DOM de type d'entrée.
Prenons un exemple dans lequel, il y a un élément de zone de texte. Ajoutons maintenant un événement keydown à la zone de texte qui chaque fois que la zone de texte reconnaît un keystore, elle répondra immédiatement avec un message d'alerte. Jetez un œil au code suivant.
Exemple
<!DOCTYPE html>
<html>
<head>
<script type = "text/javascript" src = "MooTools-Core-1.6.0.js"></script>
<script type = "text/javascript" src = "MooTools-More-1.6.0.js"></script>
<script type = "text/javascript">
var keydownEventFunction = function () {
alert('This textarea can now recognize keystroke value');
};
window.addEvent('domready', function() {
$('myTextarea').addEvent('keydown', keydownEventFunction);
});
</script>
</head>
<body>
Write Something: <textarea id = "myTextarea"> </textarea>
</body>
</html>Vous recevrez la sortie suivante -
Production
Essayez d'entrer quelque chose dans la zone de texte. Vous trouverez une boîte d'alerte avec le message suivant.
This textarea can now recognize keystroke valueEssayez d'ajouter du texte au même exemple qui lit la valeur de la zone de texte lorsque vous y êtes entré. C'est possible en utilisantevent.keyfonction avec l'événement. Jetez un œil au code suivant.
Exemple
<!DOCTYPE html>
<html>
<head>
<script type = "text/javascript" src = "MooTools-Core-1.6.0.js"></script>
<script type = "text/javascript" src = "MooTools-More-1.6.0.js"></script>
<script type = "text/javascript">
//notice the parameter "event" within the function parenthesis
var keyStrokeEvent = function(event){
var x = event.key;
alert("The enter value is: "+x)
}
window.addEvent('domready', function() {
$('myTextarea').addEvent('keydown', keyStrokeEvent);
});
</script>
</head>
<body>
<lable>Write Something:</lable> <br/>
<textarea id = "myTextarea"> </textarea>
</body>
</html>Vous recevrez la sortie suivante -
Production
Essayez de saisir du texte dans la zone de texte. Vous serez dirigé vers une boîte d'alerte avec la valeur que vous avez entrée dans la zone de texte.