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 event

Mouse 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 event

Tomemos 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 event

Eliminar 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 value

Intente 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.