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

鼠标移入和移出

鼠标移入和移出是事件处理中最常见的事件。根据鼠标的位置应用操作。如果鼠标位置进入 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 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>

您将收到以下输出：

输出

尝试在文本区域中输入文本。您将看到一个带有您输入到文本区域的值的警报框。

打印页面