JavaScriptのイベントハンドラ設定の方法

質問

要素（aタグなど）にイベントハンドラを設定する場合、
直接onclick等を書かずにaddEventListenerで追加するのが良いと聞きました。
しかしIEでは使えず、attachEventで設定する必要があります。

htmlとJavaScriptを分離するという意味では理解できるのですが、
http://java-script.seesaa.net/category/2504769-1.html
の用に
document.getElementById("hoge").onclick = function("hogehoge");
とする方が楽なんじゃないでしょうか？
IEでもFirefoxでも動くので、addEventListenerの用にブラウザ毎に書く必要もありません。

前者を使うメリットは何なのでしょうか？

回答No.2

noname#84373

臭いかもしれないものに蓋をしておくため ^^;
ちなみに自分では、いまだに理解できません。;_;

http://oshiete1.goo.ne.jp/qa4422368.html

回答No.1

yambejp

基本的には私も.onclick=function(){}を多用します。
理由は「楽」だから。とはいえ・・・

＞前者を使うメリット

まずは、設定が上書きされないこと。

<div id="hoge">hoge</div>
<script>
function fuga(){
alert("fuga");
}
function piyo(){
alert("piyo");
}
var hoge=document.getElementById("hoge");
hoge.addEventListener("click",fuga,false);
hoge.addEventListener("click",piyo,false);
</script>

もしonclickの書き換えをやるとfugaは消されてpiyoになります。
addEventListener()は文字通り追加しているのでしょう。

あとは、DOM的にプロパティやメソッドをダイレクトに
書き込むのは美しくないから・・・じゃないでしょうか