上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

JavaScript において、イベントハンドラを使ったイベント処理から、イベントリスナを使ったイベント処理にコードを変えたので、その手順などを備忘録がわりメモです。

その前段として、簡単なまとめ。

■「イベントハンドラ」とは…
JavaScriptで記述された、マウスの動きといった動作・操作に対して特定の処理を与えるための命令のこと。
onClick、onMouseOverなど。
イベントハンドラとは (event handler): - IT用語辞典バイナリ

■「イベントリスナ」とは…
何らかのイベントが発生した場合に呼ばれる関数を持つクラス。

■イベントハンドラを使うメリット
・簡単
・ブラウザの違いをあまり意識する必要がない

■イベントハンドラを使うデメリット
・HTML要素内にJavaScriptコードが混在することになり、HTMLの見た目が煩雑
・同じ要素に同じイベントハンドラを複数定義できない
第6回 イベントハンドラから脱却しよう

イベントリスナに追加する方法は、element.addEventListener - MDCに紹介されています。
以下の通り。
if (el.addEventListener){
el.addEventListener('click', modifyText, false);
} else if (el.attachEvent){
el.attachEvent('onclick', modifyText);
}


ただし、

attachEvent の欠点が一つあります。this の値がイベントを起こした要素ではなく、window オブジェクトへの参照になってしまうことです。



上記の制約があるのですが、LiosK-free Blogさんで解決するコードが紹介されています。

function observe(target, type, listener) {
if (target.addEventListener) target.addEventListener(type, listener, false);
else if (target.attachEvent) target.attachEvent('on' + type, function() { listener.call(target, window.event); });
else target['on' + type] = function(e) { listener.call(target, e || window.event); };
}

[JavaScript]addEventListenerを手軽に使おう

使い方は以下の通りです。
ブラウザ表示内のどこかをクリックすると、alertが表示されます(body onclick=~相当)。
observe(document, 'click', function(e) {
window.alert(e.type + ' on ' + this);
});


ここから蛇足というか、補足ですが、上記の e に イベントオブジェクトが格納されています。
この e から、クリックされた場所のDOM要素(いつもなら(?)document.getElementByID(id)で取得されるもの)を取得可能です。

標準仕様では event.target で取得可能ですが、残念ながらと言うか例によって IE は対応していません。
代わりに event.srcElement というものが存在します。

なので、DOM要素を取得するためには以下のようにすればよいでしょう。
var eventDOM = (event.target || event.srcElement);
Related Posts

Thoughts on スポンサーサイトイベントハンドラからイベントリスナへ

Leave a Reply

* less than 16 characters
* less than 24 characters
* less than 16 characters
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。