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);