« 【JavaScript】 DOMのメソッド・プロパティ | トップページ | 【JavaScript】オブジェクトの機能を拡張する »

2006年6月11日 (日)

【JavaScript】 イベントリスナーの追加と削除

先日書いたイベントハンドラを追加する方法でも イベントをハンドリング出来ますが、この方法でセット出来る関数は1つだけです。
しかし、例えばObserverパターンのように複数のオブジェクトに対してイベントを通知したい場面も多いと思います。
そういう場合、DOM Level2 Event Modelをサポートしているブラウザをターゲットとしているなら、addEventListener・removeEventListener メソッドを使って以下のようにイベントリスナーの追加と削除を行います。
// イベントリスナー
function targetClicked()
{
    ....
}

var eventTarget = document.getElementById("ex1");
// リスナーの追加
eventTarget.addEventListener("click", targetClicked, false);

// リスナーの削除
eventTarget.removeEventListener("click", targetClicked, false);
しかし、もっともシェアの高いInternet Explorerがこれをサポートしていません。 Internet Explorerには同様の機能としてattachEvent・detachEventというメソッドが用意されていますので、 こちらを使用します。
// イベントリスナー
function targetClicked()
{
    ....
}

var eventTarget = document.getElementById("ex1");
// リスナーの追加
eventTarget.attachEvent("onclick", targetClicked);

// リスナーの削除
eventTarget.detachEvent("onclick", targetClicked);
従って、どちらのブラウザにも対応するには、以下のようにメソッドが存在するかを判別した上で行う必要があります。
// イベントリスナー
function targetClicked()
{
    ....
}

var eventTarget = document.getElementById("ex1");
// リスナーの追加
if(eventTarget.addEventListener){
    eventTarget.addEventListener("click", targetClicked, false);
}else if(eventTarget.attachEvent){
    eventTarget.attachEvent("onclick", targetClicked);
}

// リスナーの削除
if(eventTarget.removeEventListener){
    eventTarget.removeEventListener("click", targetClicked, false);
}else if(eventTarget.detachEvent){
    eventTarget.detachEvent("onclick", targetClicked);
}

サンプルを作成しましたので、実際に動作を確認してみてください。
サンプルページ
IEとFirefoxで比較すると、同様にイベントリスナーが呼び出されますが、呼び出される順序が違う点に注意が必要です。

参考資料
Document Object Model (DOM) Level 2 Events Specification(W3C)
attachEvent Method(MSDN Library)
detachEvent Method(MSDN Library)

|

« 【JavaScript】 DOMのメソッド・プロパティ | トップページ | 【JavaScript】オブジェクトの機能を拡張する »

コメント

コメントを書く



(ウェブ上には掲載しません)




トラックバック

この記事のトラックバックURL:
http://app.cocolog-nifty.com/t/trackback/12438/10473732

この記事へのトラックバック一覧です: 【JavaScript】 イベントリスナーの追加と削除:

« 【JavaScript】 DOMのメソッド・プロパティ | トップページ | 【JavaScript】オブジェクトの機能を拡張する »