スポンサードリンク

Yahoo! User Interface Library - Event Utility

Event Utilityとは

Event Utilityとは、イベントリスナーをつかってイベント処理を行うためのインターフェイスです。これを使うことによって完全にデザインとonClickなどのイベントハンドラーをソース上から分離することができます。また、クロスブラウザー対応(ブラウザ毎の仕様の違いを吸収)していますので便利です。

詳しくはhttp://developer.yahoo.com/yui/event/のオリジナルを読まれるのがよいと思います。

Event Utilityを使う前準備

必要なのは2つのファイルです。もちろんインストールは済ませておく必要があります。

<script type="text/javascript" src="your install path/yahoo-min.js"></script>
<script type="text/javascript" src="your install path/event-min.js"></script>

Methodの紹介(APIリファレンス)

使いそうなMethodのサンプルを幾つか試してみます。

addListener	イベントリスナーを追加する
purgeElement	イベントリスナーの削除
getRelatedTarget	イベントがmouseoutの時には移動先のElement、mouseoverの時には移動元のElementを返す
getTarget	イベントがが発生したElementを返す
getTime	イベントが発生した時刻を返す
getXY	イベントが発生した座標を返す。getPageX, getPageY が配列で返る。

addListener


<boolean> addListener (<Object> el, <String> sType, <Function> fn, <Object> oScope, <boolean> bOverride)

パラメータ:

el - Element or id <div id="foo">...</div> とあった場合、document.getElementById('foo') or 'foo' を指定

sType - 'click', 'mouseover', 'load' などのイベントハンドラー名から'on' をとったものを指定

fn - イベントが発生した時に実行する関数

oScope - fnに渡す引数

bOverride - trueを指定するとoScopeにスコープが移ります。

サンプル:

function myAlert1(event, date) {
    alert( date.toLocaleString() );
}
function myAlert2(event) {
    alert( this.toLocaleString() );
}
                          /* Element でも */
YAHOO.util.Event.addListener(document.getElementById('id1'), "click", myAlert1, new Date());
                          /* id でも */
YAHOO.util.Event.addListener("id2", "click", myAlert2, new Date(), true);
...
...
<a href="javascript:;" id="id1">myAlert1が実行されます。</a>
<a href="javascript:;" id="id2">myAlert2が実行されます。</a>

デモ:

myAlert1が実行されます。
myAlert2が実行されます。
赤字の違いが bOverride の意味

purgeElement


<void> purgeElement (<HTMLElement> el, <boolean> recurse, <string> sType)

パラメータ:

el - Element. addListenerと違ってidを指定することはできない様子

recurse - trueを指定すると、再帰的に子ノードを確認しにいく。

sType - 'click', 'mouseover', 'load' などのイベントハンドラー名から'on' をとったものを指定。たとえば'click'を指定すると、'click'で登録されているものだけを削除する。指定しない場合はすべてを削除する。

サンプル:

function rmEvent3(event){
    var el3 = document.getElementById("id3");
    YAHOO.util.Event.purgeElement(el3, false);
    alert("recurseがfalseなので削除できない");
}
function rmEvent4(event){
    var el4 = document.getElementById("id4");
    YAHOO.util.Event.purgeElement(el4, true, "click");
    alert("recurseがtrueなので削除できる");
}
YAHOO.util.Event.addListener("id3_child", "click", rmEvent3);
YAHOO.util.Event.addListener("id4_child", "click", rmEvent4);
...
...
<div id="id3"><a href="javascript:;" id="id3_child">何度クリックしてもalertがでる</a></div>
<div id="id4"><a href="javascript:;" id="id4_child">1度クリックすればalertがでなくなる</a></div>

デモ:

何度クリックしてもalertがでる

1度クリックすればalertがでなくなる

getRelatedTarget


HTMLElement getRelatedTarget (<Event> ev)

パラメータ:

ev - イベント

サンプル:

var fromtoElm = YAHOO.util.Event.getRelatedTarget(event);
if(event.type=='mouseover') {
    alert( fromtoElm.id + "からマウスが入ってきました" );
}
if(event.type=='mouseout') {
    alert( fromtoElm.id + "にマウスが出ていきました" );
}

デモ:

getRelatedTarget, getTarget, getTime, getXY を使ったデモページ

サンプルページを見る

getTarget


HTMLElement getTarget (<Event> ev, <boolean> resolveTextNode)

パラメータ:

ev - イベント

resolveTextNode - ソースを見る限り今は意味がない

サンプル:

var targetElm = YAHOO.util.Event.getTarget(event);
alert( targetElm  + "タグで" + event.type + "が発生しました" );

デモ:

getRelatedTarget, getTarget, getTime, getXY を使ったデモページ

サンプルページを見る

getTime


Date getTime (<Event> ev)

パラメータ:

ev - イベント

サンプル:

var time = YAHOO.util.Event.getTime(event);
alert( new Date(time).toLocaleString() + "にイベントが発生しました");

デモ:

getRelatedTarget, getTarget, getTime, getXY を使ったデモページ

サンプルページを見る

getXY


int[] getXY (<Event> ev)

パラメータ:

ev - イベント

サンプル:

var xy = YAHOO.util.Event.getXY(event);
alert( "座標 [" + xy[0] + ", " + xy[1] + "] でイベントが発生しました" );

デモ:

getRelatedTarget, getTarget, getTime, getXY を使ったデモページ

サンプルページを見る

メールアドレス:
コメント^*: