複数のイベントリスナーを設置するのは正しい？

質問

クリック時、マウスオーバー時、マウスアウト時の処理を作るとき、
イベントリスナーの使い方はこのようなやり方でよいでしょうか。

var d = document.getElement.ById("id");

d.addEventListener('click', function(e){
var tar=e.target;
tar.style.backgroundColor ="#000000";
},false);

d.addEventListener('mouseover', function(e){
var tar=e.target;
tar.style.backgroundColor ="#aaaaaa";
},false);

d.addEventListener('mouseout', function(e){
var tar=e.target;
tar.style.backgroundColor ="#555555";
},false);

回答No.1

yambejp · ベストアンサー

悪いとは言わないですが、汎用性があまりないですね

こんな風にするとある程度省略が可能です
<script>
try{
document.addEventListener('click',function(e){func(e)},false);
document.addEventListener('mouseover',function(e){func(e)},false);
document.addEventListener('mouseout',function(e){func(e)},false);
}catch(e){
document.attachEvent('onclick',function(e){func(e)});
document.attachEvent('onmouseover',function(e){func(e)});
document.attachEvent('onmouseout',function(e){func(e)});
}
function func(e){
var t = (e.srcElement || e.target);
if(t.id==="hoge"){
switch(e.type){
case "click":
t.style.backgroundColor ="#000000";
break;
case "mouseover":
t.style.backgroundColor ="#aaaaaa";
break;
case "mouseout":
t.style.backgroundColor ="#555555";
break;
}
}
}
</script>

<div id="hoge">hoge</div>

お礼

switch(e.type)ですね。有難うございます。解決しました。