MooTools - Gestione degli eventi
Come i selettori, anche la gestione degli eventi è un concetto essenziale di MooTools. Questo concetto viene utilizzato per creare eventi e azioni per eventi. Dobbiamo anche comprendere le azioni e i loro effetti. Proviamo alcuni eventi in questo capitolo.
Singolo clic sinistro
L'evento più comune nello sviluppo web è il singolo clic sinistro. Ad esempio, Hyperlink riconosce un singolo evento di clic e ti porta a un altro elemento DOM. Il primo passaggio consiste nell'aggiungere un evento clic all'elemento DOM. Prendiamo un esempio che aggiunge un evento clic al pulsante. Quando fai clic su quel pulsante, verrà visualizzato un messaggio.
Esempio
<!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>Riceverai il seguente output:
Produzione
Quando fai clic sul pulsante, riceverai il seguente messaggio:
This button element recognizes the click eventMouse Invio e Mouse Esci
Mouse Enter e Mouse Leave sono gli eventi più comuni nella gestione degli eventi. L'azione viene applicata in base alla posizione del mouse. Se la posizione del mouse è INVIO nell'elemento DOM, verrà applicata un'azione. Se lascia l'area dell'elemento DOM, applicherà un'altra azione.
Facciamo un esempio che spieghi come funziona l'evento Enter del mouse. Dai un'occhiata al seguente codice.
Esempio
<!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>Riceverai il seguente output:
Produzione
Se mantieni il puntatore del mouse sul pulsante, riceverai il seguente messaggio.
Recognizes the mouse enter eventFacciamo un esempio che spieghi come funziona l'evento Mouse Leave. Dai un'occhiata al seguente codice.
Esempio
<!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>Riceverai il seguente output:
Produzione
Se mantieni il puntatore del mouse sul pulsante, riceverai il seguente messaggio.
Recognizes the mouse leave eventRimuovi un evento
Questo metodo viene utilizzato per rimuovere un evento. Rimuovere un evento è facile come aggiungere un evento e segue la stessa struttura. Dai un'occhiata alla seguente sintassi.
Sintassi
//works just like the previous examplesuse .removeEvent method
$('id_name').removeEvent('mouseleave', mouseLeaveFunction);Sequenze di tasti come input
MooTools è in grado di riconoscere le tue azioni, il tipo di input che hai fornito tramite l'elemento DOM. Utilizzando ilkeydown è possibile leggere ogni singola chiave dall'elemento DOM di tipo di input.
Facciamo un esempio in cui è presente un elemento dell'area di testo. Aggiungiamo ora un evento keydown all'area di testo che ogni volta che l'area di testo riconosce un keystore, risponderà immediatamente con un messaggio di avviso. Dai un'occhiata al seguente codice.
Esempio
<!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>Riceverai il seguente output:
Produzione
Prova a inserire qualcosa nell'area di testo. Troverai una casella di avviso insieme al seguente messaggio.
This textarea can now recognize keystroke valueProva ad aggiungere del testo allo stesso esempio che legge il valore dalla textarea quando l'hai inserito. È possibile utilizzandoevent.keyfunzione con l'evento. Dai un'occhiata al seguente codice.
Esempio
<!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>Riceverai il seguente output:
Produzione
Prova a inserire il testo nell'area di testo. Verrai indirizzato a una casella di avviso insieme al valore immesso nell'area di testo.