this キーワードが指すオブジェクトを指定する方法 イベントリスナ編

前回の記事では、メソッド内の this キーワードが指すオブジェクト指定する方法を書きました。

今回は、イベントリスナ（ユーザが特定の要素に対して、クリックなどの動作をした際に実行されるメソッド）での this キーワードが指すオブジェクトを指定します。

例として、指定した DOMElement での「 Ctrl キーを押しながらクリックした回数」を数えるオブジェクトを示します。

function ClickCounter(element) {
    this.times = 0;
    element.onclick = this._count.bindAsEventListener(this);
}

ClickCounter.prototype._count = function(e) {
    if (e.ctrlKey) {
        this.times++;
    }
}

前回とは違い、今回は Prototype.js の bindAsEventListener メソッドを使用しています。bind メソッドと違い、bindAsEventListner メソッドは、イベントリスナ用に最適化されています。

というのも、実は Internet Explorer と Firefox とでは、発生したイベントを表すオブジェクト（イベントオブジェクト）を取得する方法が異なります。

Firefox では、上記の _count メソッドのように、引数にイベントオブジェクトが渡されます。しかし、Internet Explorer では、event オブジェクトにイベントオブジェクトが格納されています。つまり、_count メソッドを Internet Explorer 専用に書き直すと、次のようになります。

ClickCounter.prototype._count = function() {
    if (event.ctrlKey) {
        this.times++;
    }
}

しかし、Prototype.js の bindAsEventListener メソッドを使用すると、上記のようなブラウザ間の違いを吸収してくれます。つまり、Internet Explorer であっても、イベントリスナの引数にイベントオブジェクトが渡されるようになります。

参考文献

• Prototype.js
• prototype.js の開発者向けメモ
• Document Object Model (DOM) Level 2 Events Specification
• イベントモデルの理解