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要素に入力されている場合、1つのアクションが適用されます。 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

Mouse Leaveイベントの仕組みを説明する例を見てみましょう。次のコードを見てください。

例

<!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要素からすべてのキーを読み取ることができます。

テキストエリア要素がある例を見てみましょう。ここで、テキストエリアにキーダウンイベントを追加して、テキストエリアがキーストアを認識するたびに、すぐにアラートメッセージで応答するようにします。次のコードを見てください。

例

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

入力したときにtextareaから値を読み取る同じ例にテキストを追加してみてください。イベントで 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>

次の出力が表示されます-

出力

テキスト領域にテキストを入力してみてください。テキスト領域に入力した値とともに警告ボックスが表示されます。

Mootools-event-handling

MooTools-イベント処理

シングルクリック

例

出力

マウス入力およびマウス終了

例

出力

例

出力

イベントを削除する

構文

入力としてのキーストローク

例

出力

例

出力

目次