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>

您將收到以下輸出：

輸出

嘗試在文字區域中輸入文字。您將看到一個帶有您輸入到文字區域的值的警報框。

列印頁面