MooTools - 事件处理

与选择器一样，事件处理也是 MooTools 的一个基本概念。这个概念用于创建事件和事件的操作。我们还需要了解行动及其效果。让我们尝试本章中的一些事件。

单击左键

Web 开发中最常见的事件是单击左键。例如，超链接可以识别单击事件并将您带到另一个 DOM 元素。第一步是向 DOM 元素添加单击事件。让我们举一个为按钮添加点击事件的例子。当您单击该按钮时，它将显示一条消息。

例子

<!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>

您将收到以下输出 -

输出

当您单击该按钮时，您将收到以下消息 -

This button element recognizes the click event

鼠标进入和鼠标离开

鼠标进入和鼠标离开是事件处理中最常见的事件。根据鼠标的位置应用该操作。如果鼠标的位置是 ENTER 到 DOM 元素中，那么它将应用一个操作。如果它离开 DOM 元素区域，那么它将应用另一个操作。

让我们举一个例子来解释鼠标 Enter 事件是如何工作的。看看下面的代码。

例子

<!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>

您将收到以下输出 -

输出

如果将鼠标指针保持在该按钮上，您将收到以下消息。

Recognizes the mouse enter event

让我们举一个例子来解释鼠标离开事件的工作原理。看看下面的代码。

例子

<!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>

您将收到以下输出 -

输出

如果将鼠标指针保持在该按钮上，您将收到以下消息。

Recognizes the mouse leave event

删除事件

该方法用于删除事件。删除事件与添加事件一样简单，并且遵循相同的结构。看看下面的语法。

句法

//works just like the previous examplesuse .removeEvent method
$('id_name').removeEvent('mouseleave', mouseLeaveFunction);

击键作为输入

MooTools 可以识别您的操作——您通过 DOM 元素给出的输入类型。通过使用keydown函数，您可以从输入类型 DOM 元素中读取每个键。

让我们举一个例子，其中有一个文本区域元素。现在让我们向文本区域添加一个 keydown 事件，每当文本区域识别到任何密钥库时，它都会立即响应一条警报消息。看看下面的代码。

例子

<!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>

您将收到以下输出 -

输出

尝试在文本区域中输入一些内容。您将看到一个警告框以及以下消息。

This textarea can now recognize keystroke value

尝试在同一示例中添加一些文本，该示例在您输入文本区域时从文本区域读取值。可以通过将event.key函数与事件一起使用来实现。看看下面的代码。

例子

<!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>

您将收到以下输出 -

输出

尝试在文本区域中输入文本。您将被引导至一个警告框以及您在文本区域中输入的值。