MooToolsを30日でマスターするチュートリアルを試す！【5日目】｜caraldo.net

2008年11月24日

コメント（0）トラックバック（0） Posted by ; k.

MooToolsを30日でマスターするチュートリアルを試す！【5日目】

MooToolsマスターチュートリアルも5日目まで来ました！

チュートリアルの目次はこちら。

今回はDay 5 - Event Handling（原文）、イベントハンドラについてです。

これを覚えると実用的な動きになってくると思うので、頑張って行きましょう。

続きは以下から。

Event Handling in Mootools 1.2

前回のチュートリアルでは、違った形でのfunctionの構築、使い方を見てきました。
次のステップはイベントを把握する事です。

セレクタと同様に、イベントはインタラクティブなUIを作成するのに不可欠なものです。
一度要素を取得すると、次にどんな動作がどんな効果を引き起こすかを決める必要があります。
effects部分は後のチュートリアルに残して、まずはイベントを見ていきます。

マウスクリック - Single Left Click

クリックイベントはウェブ開発で最も一般的です。
例えば、ハイパーリンクは、クリックイベントを認識して、別のURLに遷移します。

Mootoolsでは、他のDOM要素上でクリックイベントを認識する事が出来、デザインや機能に柔軟性を与えられます。

最初のステップはクリックイベントを割り当てる事です。

//$('id_name') 要素を定義します。
//.addEvent でイベントを付与します。
//('click') でイベントのタイプを定義します。
$('id_name').addEvent('click', function(){
    //ここにクリック時に実行されるfunctionを定義します。
    alert('this element now recognizes the click event');
});

以下の様に切り離して定義することも可能です。

var clickFunction = function(){
    //ここにクリック時に実行されるfunctionを定義します。
    alert('this element now recognizes the click event');
}
 
window.addEvent('domready', function() {
    $('id_name').addEvent('click', clickFunction);
});

以下の様なHTMLで実際の挙動を確認してみてください。

<body>
    ここをクリック！
</body>

※注意
Mootoolsのクリックイベントはハイパーリンクと同様にマウスをはなした段階で実行されます。
押したままマウスをドラッグし、範囲外に出るとキャンセルされます。
これはユーザーに対して変更の機会を与える為のものです。

サンプルページを作成しましたので実際に挙動を試してください。

Mouse Enter & Mouse Leave

ハイパーリンクと同様にhoverイベントも認識させる事が出来ます。
これもMootoolsでは、他のDOM要素に適用する事が可能です。

それをmouseenterとmouseleaveに分割することで、より詳細に機能を制御できます。

先ほどの様に、まず最初にイベントを割り当てます。

var mouseEnterFunction = function(){
    //ここにmouseEnter時に実行されるfunctionを定義します。
    alert('this element now recognizes the mouse enter event');
}
 
window.addEvent('domready', function() {
    $('id_name').addEvent('mouseenter', mouseEnterFunction);
});

mouseleaveイベントも同様です。要素からマウスが離れた際に実行されます。

var mouseLeaveFunction = function(){
     //ここにmouseLeave時に実行されるfunctionを定義します。
    alert('this element now recognizes the mouse leave event');
}
 
window.addEvent('domready', function() {
   $('id_name').addEvent('mouseleave', mouseLeaveFunction);
});

これも同様にサンプルページで実際に挙動を試してみてください。

イベントを外す - Remove an Event

イベントを外す際には、イベントを割り当てるのと同じ位簡単に出来ます。

//イベントを割り当てるのと似た記述、.removeEventを使用する
$('id_name').removeEvent('mouseleave', mouseLeaveFunction);

サンプルページで実際に挙動を試してみてください。
「removeEventのテストです。」部分に割り当てられているイベント「mouseLeaveFunction2」は実行されません。

キー操作　-　Keystrokes in Textarea or Input

Mootoolsではテキストエリアやinputタグ内でのキー操作を認識する事も出来ます。

var keydownEventFunction = function () {
    alert('This textarea can now recognize keystroke events');
};
 
window.addEvent('domready', function() {
    $('myTextarea').addEvent('keydown', keydownEventFunction);
});

上の記述でキー操作を行うとイベントを呼び出せます。
特定のキー操作時にイベントを呼び出すにはパラメータとif文を使用します。

//functionの()内にeventという名前のパラメータを付与します。
var keyStrokeEvent = function(event){
    //event keyが"k"だったら実行
    if (event.key == "k") {  
	    alert("This tutorial has been brought you by the letter k.") 
    };
}
 
window.addEvent('domready', function() {
    $('myTextarea').addEvent('keydown', keyStrokeEvent);
});

shiftキー、Ctrlキーの場合は以下の様に記述します。

var keyStrokeEvent = function(event){
    // Ctrlキーの場合はevent.controlに置き換え
    if (event.shift) { 
	    alert("You pressed shift.") 
    };
}
 
window.addEvent('domready', function() {
    $('myTextarea').addEvent('keydown', keyStrokeEvent);
});

サンプルページでは、shiftキーが押された場合とCtrlキーが押された場合でalertメッセージを変更する処理をしています。