Native: Event

MooToolsのEventメソッドです。

Eventメソッド: constructor

構文:

new Event([event[, win]]);

引数:

  1. event - (イベント) HTMLEventオブジェクト。
  2. win - (window, オプション: 初期値＝window) eventのスコープ。

プロパティ:

  • shift - (真偽値) ユーザがshiftキーを押したらtrue。
  • control - (真偽値) ユーザがctrlキーを押したらtrue。
  • alt - (真偽値) ユーザがaltキーを押したらtrue。
  • meta - (真偽値) ユーザがmetaキーを押したらtrue。
  • wheel - (数) スクロールボタンを動かした回数。
  • code - (数) 押されたキーのキーコード。
  • page.x - (数) window全体から見たマウスのx座標。
  • page.y - (数) window全体から見たマウスのy座標。
  • client.x - (数) windowの見えている部分におけるマウスのx座標。
  • client.y - (数) windowの見えている部分におけるマウスのy座標。
  • key - (文字列) 押されたキーの小文字を返します。キーには 'enter', 'up', 'down', 'left', 'right', 'space', 'backspace', 'delete', 'esc'があります。
  • target - (要素) eventの発生した要素です。パフォーマンスの観点から、$で拡張していません。
  • relatedTarget - (要素) eventが関係しているターゲットです。$で拡張していません。

例:

$('myLink').addEvent('keydown', function(event){

    //渡されたeventのパラメータはすでにEventクラスのインスタンスになっています。
    alert(event.key);   //押されたキーの名前を小文字で返します。
    alert(event.shift); //shiftキーが押されたらtrueを返します。

    if (event.key == 's' && event.control) alert('Document saved.'); //ユーザCtrlとSを押したら実行されます。

});

注意点:

  • event.pageとevent.clientにアクセスするには、 標準準拠で作成されている必要があります。
  • addEventによって添付されたすべてのイベントは、mootoolsメソッドを自動的に備えているので、わざわざインスタンス化する必要はありません。

Eventメソッド: stop

Eventの伝播を止め、同時にpreventDefaultを実行します。

構文:

myEvent.stop();

戻り値:

  • (オブジェクト) Eventインスタンス。

例:

HTML:
<a id="myAnchor" href="http://google.com/">Visit Google.com</a>
JavaScript
$('myAnchor').addEvent('click', function(event){

    event.stop(); //ブラウザがリンク先に移動しないようにします。
    this.set('text', "Where do you think you're going?"); //'this'はEventが発生した要素です。

    (function(){
        this.set('text', "Instead visit the Blog.").set('href', 'http://blog.mootools.net');
    }).delay(500, this);

});

注意点:

  • 関数内でfalseを返すことでも、Eventの伝播を止められます。

参考情報:

Eventメソッド: stopPropagation

イベント伝播の抑止のためのクロス・ブラウザメソッドです（イベントのDOMバブリングも抑止します）。

構文:

myEvent.stopPropagation();

戻り値:

  • (オブジェクト) Eventオブジェクト。

例:

"#myChild"はmyElementと同じ領域をカバーしていません。したがって、'click'イベントの発生場所はクリックする位置によって変わります：
HTML:
<div id="myElement">
    <div id="myChild"></div>

</div>
JavaScript
$('myElement').addEvent('click', function(){

    alert('click');
    return false; // stopPropagationに同じ。
});
    $('myChild').addEvent('click', function(event){

    event.stopPropagation(); // イベントのバブルアップを止め、親要素にクリックイベントを発生させません。
});

参考情報:

Eventメソッド: preventDefault

イベントのデフォルト・アクションを抑止するためのクロス・ブラウザメソッドです。

構文:

myEvent.preventDefault();

戻り値:

  • (オブジェクト) Eventオブジェクト。

例:

HTML:
<form>
    <input id="myCheckbox" type="checkbox" />
</form>
JavaScript
$('myCheckbox').addEvent('click', function(event){
    event.preventDefault(); //チェックボックスが"checked"になるのを抑止します。

});

参考情報:

Hash: Event.Keys

連想配列Event.Keysにプロパティを追加することで、キーコードイベントを追加できます。

例:

Event.Keys.shift = 16;
$('myInput').addEvent('keydown', function(event){

    if (event.key == "shift") alert("You pressed shift.");
});

このドキュメントはMooToolsのドキュメントを元に高橋文樹が翻訳（ちょっと改変）しました。
本家と同じく、Attribution-NonCommercial-ShareAlike 3.0ライセンスで公表されています。

トップに戻る