Web Artisan Blog - ウェブ アルチザン ブログ

ここでも書かれていますが、例えばあるアンカータグがクリックされた時にalert表示するロジックを書くとき、3つの書き方があるという事です。

１、アンカータグ自体にonClickを定義して書く

<a ・・・・・onClick="alert('onClick');">〜</a>

２、script内に、onclickへfunctionを定義する。つまり、１をアンカータグ内でなくscriptに定義する

document.getElementById(〜).onclick = function () {

  alert('onclick');

  return false;

}

３、script内に、addEventListener関数を使って定義する（IEはattachEvent関数）

document.getElementById(〜).addEventListener('click', msg, false);

function msg() {

  alert('addEvent');

}

では、この3つをどう切り分けて使うのか？
１はメンテナンス性が低下するし、しかしブラウザ等の環境によらず一番安定して動くし、２は、３は、、、とまあイベント処理を行う用途によると言えばそれまでですが、ここで一つ言えるのは、１と２は処理を上書きしあうが、３は上書きしない、つまり、３を使用する事で同一のイベントに複数のイベント処理を定義できるという事です。

で、サンプルを用意してみました。
eventimg.htmlというhtml内に、

<a id="india" href="http://www.res-system.com/weblog/media/1/20040929-india17.jpg" onClick="alert('onClick');"><img src="http://www.res-system.com/weblog/media/1/20040929-india18.jpg" alt="" /></a>

という具合に、id="india"のアンカータグのonClickイベントにalert処理を記述（１の処理）、その下にはonclickへfunctionを定義（２の処理）、

document.getElementById('india').onclick = function () {

  alert('onclick');

  return false;

}

更にその下には、addEventListener関数を使って定義（３の処理）。

if (window.opera) {

  document.getElementById('india').addEventListener('click', msg, false);

} else if(document.all) {

  document.getElementById('india').attachEvent('onclick', msg);

} else {

  document.getElementById('india').addEventListener('click', msg, false);

}

function msg() {

  alert('addEvent');

}

＞サンプル実行

すると、動作は以下の通り。
FireFox1.5.0.3・・・onclick−＞addEventの順で表示
Opera8.54・・・onclick−＞addEventの順で表示
IE6・・・onclick−＞addEventの順で表示
【追記：2006/05/16】
Safari 1.3.2・・・addEvent−＞onclickの順で表示
Macでは、この時点で動作が異なるようです。。。

つまり、アンカータグのalert表示処理（１の処理）が、２の処理に上書きされて”onclick”のalertが表示され、次に３の処理による”addEvent”のalert表示が２の処理を上書きせずに行われているのです。
このaddEventListenerによって「同一のイベントに複数のイベント処理を定義できる」という事は、他との違い、またこれが非常に重要になってくる処理もあると思います。

こんな具合に、「ほほー」と納得しつつイベントハンドラを駆使して色々していくと面白いんですが、上記に更に以下の処理を追加した場合どうなるか。
windowのonload時に、アンカータグのonclickへfunctionを定義。

window.onload = function() {

  var anchors = document.getElementsByTagName("a");

  for (var i=0; i < anchors.length; i++){

    var anchor = anchors[i];

    anchor.onclick = function () {

    alert('onclick2');

    return false;

    }

  }

}

＞サンプル実行２

すると、動作は以下の通り。
FireFox1.5.0.3・・・onclick2−＞addEventの順で表示
Opera8.54・・・addEvent−＞onclick2の順で表示
IE6・・・onclick2−＞addEventの順で表示
【追記：2006/05/16】
Safari 1.3.2・・・addEvent−＞onclick2の順で表示

FireFoxとOperaの動作（処理の順番）が違う。。。（IEはattachEventですし、異なってもいいんですが）

こんな具合に、更に詰めて色々やってくと、イベント処理の定義のしようによってはブラウザ毎に動作も異なってきます。またこういう事により、色んなサービスサイト提供の外部サイトjs同士がぶつかって処理がおかしくなる事もあり得るでしょう。

あ、IE7ならどうなるんやろ・・。
また調べます。