忍者ブログ
[129] [128] [127] [126] [125] [124] [123] [122] [121] [120] [119]

DATE : 2017/10/23 (Mon)
×

[PR]上記の広告は3ヶ月以上新規記事投稿のないブログに表示されています。新しい記事を書く事で広告が消えます。


DATE : 2006/08/09 (Wed)

前回の記事では、メソッド内の 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 であっても、イベントリスナの引数にイベントオブジェクトが渡されるようになります。

参考文献

●この記事にコメントする
お名前
タイトル
文字色
メールアドレス
URL
コメント
パスワード
●この記事へのトラックバック
この記事にトラックバックする:
忍者ブログ [PR]
ブログ内検索
最近の状況
リンク
カレンダー
09 2017/10 11
S M T W T F S
1 2 3 4 5 6 7
8 9 10 11 12 13 14
15 16 17 18 19 20 21
22 23 24 25 26 27 28
29 30 31
使用許諾
最新コメント
(08/15)
(05/04)
(03/06)
(03/04)
(09/25)
最新トラックバック
T/O
(11/05)
ブログ内検索
最近の状況
リンク
カレンダー
09 2017/10 11
S M T W T F S
1 2 3 4 5 6 7
8 9 10 11 12 13 14
15 16 17 18 19 20 21
22 23 24 25 26 27 28
29 30 31
使用許諾
最新コメント
(08/15)
(05/04)
(03/06)
(03/04)
(09/25)
最新トラックバック
T/O
(11/05)