Native: Element

• ドル関数によって、どんなDOM要素にもメソッドを適用できるカスタムNativeです。
• これらのメソッドはwindowとdocumentオブジェクトにも使えます。

注意点:

• Internet ExplorerはElement:fireEventを使わない限り、ランダムにイベントを発生させます。

Elementメソッド: addEvent

DOM要素にイベントリスナーを添附します。

構文:

myElement.addEvent(type, fn);

引数:

1. type - (文字列) 監視したいイベント名('click', 'load', など)。接頭辞'on'はつけません。
2. fn - (関数) 実行したい関数。

戻り値:

• (要素) この要素。

例:

HTML:

<div id="myElement">Click me.</div>

JavaScript

$('myElement').addEvent('click', function(){

    alert('clicked!');
});

注意点:

• リスナー関数の中でfalseを返すか、Event:stopを使うことでイベントを停止できます。
• このメソッドはdocumentとwindowにも添附できます。

参考情報:

• w3schools Event Attributes

Elementメソッド: removeEvent

Element.addEventと同じですが、代わりに指定したイベントリスナーを取り除きます。

構文:

myElement.removeEvent(type, fn);

引数:

1. type - (文字列) イベント名。
2. fn - (関数) 削除したい関数。

戻り値:

• (要素) この要素。

例:

通常の使い方:

var destroy = function(){ alert('Boom: ' + this.id); } //'this'はこの要素を参照します。

$('myElement').addEvent('click', destroy);

// 後で
$('myElement').removeEvent('click', destroy);

bindを使った例:

var destroy = function(){ alert('Boom: ' + this.id); }

var boundDestroy = destroy.bind($('anotherElement'));
$('myElement').addEvent('click', boundDestroy);

// 後で
$('myElement').removeEvent('click', destroy); //これではイベントを削除できません。
$('myElement').removeEvent('click', destroy.bind($('anotherElement')); // これもイベントを削除できません。

$('myElement').removeEvent('click', boundDestroy); // これがイベントを削除する正しいやり方です。

注意点:

• Function:bindやFunction:passを使って関数が付け加えられた場合、新しい参照が作られます。removeEvent を動かすためには、削除したい関数への正確な参照を渡す必要があります。
• このメソッドはdocumentとwindowにも添附されます。

Elementメソッド: addEvents

Element:addEventと同じですが、オブジェクトを用いて一度に複数のイベントを添附できます。

構文:

myElement.addEvents(events);

引数:

1. events - (オブジェクト) キー＝値を持つオブジェクト。キーはイベント名、値はイベントが発生したときに実行される関数。

戻り値:

• (要素) この要素。

例:

$('myElement').addEvents({

    'mouseover': function(){
        alert('mouseover');
    },
    'click': function(){

        alert('click');
    }
});

注意点:

• このメソッドはdocumentとwindowにも添附されます。

参考情報:

• Element:addEvent

Elementメソッド: removeEvents

要素から指定したタイプのイベントをすべて削除します。もし引数が渡されなければ、全てのタイプの全イベントが削除されます。

構文:

myElements.removeEvents([events]);

引数:

1. events - (オプション) 渡されなければ、すべてのタイプの全イベントが削除されます。
   • (文字列) イベント名(e.g. 'click')。このタイプのイベントがすべて削除されます。
   • (オブジェクト) タイプ＝関数のペアを持つオブジェクト。Element:addEventに渡されるのと同じものです。

戻り値:

• (要素) この要素。

例:

var myElement = $('myElement');
myElement.addEvents({

    'mouseover': function(){
        alert('mouseover');
    },
    'click': function(){

        alert('click');
    }
});

myElement.addEvent('click', function(){ alert('clicked again'); });
myElement.addEvent('click', function(){ alert('clicked and again :('); });

//addEventはそれぞれの関数を添附しました。
//残念なことに、訪問者はmyElementから受けたアラートを3回もクリックしなくてはなりません。
myElement.removeEvents('click'); // これで訪問者の指はクリックイベントから守られました。

注意点:

• このメソッドはdocumentとwindowにも添附されます。

参考情報:

• Element:removeEvent

Elementメソッド: fireEvent

要素に添附されているイベントから、指定したタイプをすべて実行します。

構文:

myElement.fireEvent(type[, args[, delay]]);

引数:

1. type - (文字列) イベント名(e.g. 'click')
2. args - (いろいろ, オプション) 関数に渡したい引数からなる配列か一つのオブジェクト。複数の引数を渡す場合は、配列にしなければなりません。
3. delay - (数, オプション) イベントを実行するまでの待機時間(ミリ秒)。

戻り値:

• (要素) この要素。

例:

// 'anElement'を渡して、一秒たってからすべての'click'イベントを実行します。
$('myElement').fireEvent('click', $('anElement'), 1000);

注意点:

• これはDOMイベントを実行しません(インラインイベントは考慮します。 ie. onmousedown="..")。
• このメソッドはdocumentとwindowにも添附されます。

Elementメソッド: cloneEvents

要素から要素へとイベントを複製します。

構文:

myElement.cloneEvents(from[, type]);

引数:

1. from - (要素) この要素からすべてのイベントをコピーします。
2. type - (文字列, オプション) このタイプのイベントだけをコピーします。nullならば、すべてのイベントをコピーします。

戻り値:

• (要素) この要素。

例:

var myElement = $('myElement');
var myClone = myElement.clone().cloneEvents(myElement); //要素とイベントをコピーします。

注意点:

• このメソッドはdocumentとwindowにも添附されます。

ハッシュ: Element.Events

Element.Eventsハッシュに対してプロパティ(オブジェクト)を加えることで、カスタムイベントを添附することができます。

引数:

Element.Events.プロパティ (オブジェクト)は以下の通り:

1. base - (文字列, オプション) カスタムイベントが監視する元となるイベント。conditionがセットされた場合は必須となります。
2. condition - (関数, オプション) カスタムイベントの発生を定義する条件。イベントを添附した要素にバインドされます。イベントが引数として渡されます。
3. onAdd - (関数, オプション) カスタムイベントが加えられたときに実行する関数。イベントを添附した要素にバインドされます。
4. onRemove - (関数, オプション) イベントが削除されたときに実行される関数。イベントを添附した要素にバインドされます。

例:

Element.Events.shiftclick = {
    base: 'click', //ベースとなるイベントタイプを設定しました。

    condition: function(event){ //さらに、追加条件として関数を加えます。
        return (event.shift == true); //これは関数が実行できるということです。

    }
};

$('myInput').addEvent('shiftclick', function(event){

    log('the user clicked the left mouse button while holding the shift key');
});

注意点:

• 作成できるカスタムイベントには様々なものがあります:
  1. baseだけのカスタムイベント: ベースイベントにリダイレクトするだけです。
  2. baseとconditionを持つカスタムイベント: 条件を満たしたときだけベースイベントにリダイレクトされます。
  3. onAddまたはonRemoveと上記のいずれかを持つカスタムイベント: イベントが添附・削除されたときの追加関数として振舞います。

警告:

ネイティブ・イベントを上書きしたくないならば、conditionオプションを使うとき、baseを指定する必要があります。 (非推奨: なにをしようとしているのか理解しているときにだけ使いましょう)

Custom Events

イベント: mouseenter

このイベントはマウスがDOM要素の領域内に入ったときにだけ発生し、その子要素の上を行き来しても再度発生することはありません(mouseoverとは違います)。

例:

$('myElement').addEvent('mouseenter', myFunction);

参考情報:

• Element:addEvent

イベント: mouseleave

このイベントマウスはDOM要素の領域から出たときにだけ発生し、その子要素の上を行き来しても再度発生することはありません(mouseoutとは違います)。

例:

$('myElement').addEvent('mouseleave', myFunction);

参考情報:

• Element:addEvent

イベント: mousewheel

このイベントはマウスホイールが回転したときに発生します。

例:

$('myElement').addEvent('mousewheel', myFunction);

注意点:

• このカスタムイベントは単にDOMMouseScroll (Mozilla)をmousewheel (Opera, Internet Explorer)へとリダイレクトして、クロス・ブラウザ対応にしたものです。

参考情報:

• Element:addEvent