MooTools - Manejo de eventos
Al igual que los selectores, el manejo de eventos también es un concepto esencial de MooTools. Este concepto se utiliza para crear eventos y acciones para eventos. También necesitamos tener una idea de las acciones y sus efectos. Probemos algunos eventos en este capítulo.
Un solo clic izquierdo
El evento más común en el desarrollo web es Single Left Click. Por ejemplo, Hyperlink reconoce un evento de un solo clic y lo lleva a otro elemento DOM. El primer paso es agregar un evento de clic al elemento DOM. Tomemos un ejemplo que agrega un evento de clic al botón. Al hacer clic en ese botón, se mostrará un mensaje.
Ejemplo
<!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>Recibirá el siguiente resultado:
Salida
Al hacer clic en el botón, aparecerá el siguiente mensaje:
This button element recognizes the click eventMouse Enter y Mouse Salir
Mouse Enter y Mouse Leave son los eventos más comunes en el manejo de eventos. La acción se aplica en función de la posición del mouse. Si la posición del mouse es ENTRAR en el elemento DOM, entonces aplicará una acción. Si sale del área del elemento DOM, aplicará otra acción.
Tomemos un ejemplo que explica cómo funciona el evento Enter del mouse. Eche un vistazo al siguiente código.
Ejemplo
<!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>Recibirá el siguiente resultado:
Salida
Si mantiene el puntero del mouse sobre el botón, obtendrá el siguiente mensaje.
Recognizes the mouse enter eventTomemos un ejemplo que explica cómo funciona el evento Mouse Leave. Eche un vistazo al siguiente código.
Ejemplo
<!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>Recibirá el siguiente resultado:
Salida
Si mantiene el puntero del mouse sobre el botón, obtendrá el siguiente mensaje.
Recognizes the mouse leave eventEliminar un evento
Este método se utiliza para eliminar un evento. Eliminar un evento es tan fácil como agregar un evento y sigue la misma estructura. Eche un vistazo a la siguiente sintaxis.
Sintaxis
//works just like the previous examplesuse .removeEvent method
$('id_name').removeEvent('mouseleave', mouseLeaveFunction);Pulsaciones de teclas como entrada
MooTools puede reconocer sus acciones, el tipo de entrada que ha proporcionado a través del elemento DOM. Usando elkeydown función, puede leer todas y cada una de las teclas del elemento DOM de tipo de entrada.
Tomemos un ejemplo en el que hay un elemento de área de texto. Agreguemos ahora un evento de keydown al área de texto que siempre que el área de texto reconozca cualquier almacén de claves, responderá con un mensaje de alerta inmediatamente. Eche un vistazo al siguiente código.
Ejemplo
<!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>Recibirá el siguiente resultado:
Salida
Intente ingresar algo en el área de texto. Encontrará un cuadro de alerta junto con el siguiente mensaje.
This textarea can now recognize keystroke valueIntente agregar algo de texto al mismo ejemplo que lee el valor del área de texto cuando ingresó en él. Es posible usandoevent.keyfunción con el evento. Eche un vistazo al siguiente código.
Ejemplo
<!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>Recibirá el siguiente resultado:
Salida
Intente ingresar texto en el área de texto. Se le dirigirá a un cuadro de alerta junto con el valor que ingresó en el área de texto.