<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<title>特定のid付きのdiv要素をクリックして特定の関数を実行させる</title>
<style type="text/css">
</style>
</head>
<body>
<h2>特定のid付きのdiv要素をクリックして特定の関数を実行させる</h2>
<div id="a01">ここをクリック1</div>
<br/><br/>
<div id="a02">ここをクリック2</div>
<br/><br/>
<div id="a03">ここをクリック3</div>
<br/><br/>
<div id="a04">ここをクリック4</div>
<br/><br/>
<div id="a05">ここをクリック5</div>
<br/><br/>
<div id="a06">ここをクリック6</div>
<br/><br/>
<div id="a07">ここをクリック7</div>
<br/><br/>
<div id="a08">ここをクリック8</div>
<h3>注意</h3>
同じidに関数を設定するときは、引数flgをtrueにして渡す。<br/><br/>
<div id="a09">ここをクリック9</div>
<br/><br/>
同じidに関数を設定するときに引数flgがなかったり、<br/>
flgがfalseになっていると関数が上書きされる。<br/><br/>
<div id="a10">ここをクリック10</div>
<br/><br/>
<script type="text/javascript">
function getElementID(nm){
return document.getElementById(nm);
}
var click=click||{};
click.click_id=(function(){
var that={};
that.fire=function(s){
var id=s.id,bullet=s.bullet,para=s.para,flg=s.flg,
targetElement=getElementID(id),
clickListener=function(){
bullet(para);
};
if(!flg){
//クリックイベント１つ目を登録
targetElement.onclick=clickListener;
}else{
//クリックイベント2つ目以降を登録
if(targetElement.addEventListener){
targetElement.addEventListener('click',clickListener,false);
}else{
targetElement.attachEvent('onclick',clickListener);
}
}
};
return that;
})();
function click01(para){
var str=para||"hello";
alert(str);
}
function click02(para){
var str;
if(para&¶.name){
str=para.name;
}else{
str="小保方";
}
alert(str);
}
window.onload=function(){
click.click_id.fire({id:"a01", bullet:click01});
click.click_id.fire({id:"a02", bullet:click01,para:"焼肉"});
click.click_id.fire({id:"a03", bullet:click01,para:"親子丼"});
click.click_id.fire({id:"a04", bullet:click01,para:"映画"});
click.click_id.fire({id:"a05", bullet:click01,para:"Game Over"});
click.click_id.fire({id:"a06", bullet:click02});
click.click_id.fire({id:"a07", bullet:click02,para:{name:"John"}});
click.click_id.fire({id:"a08", bullet:click02,para:{name:"God"}});
//同じidに関数を設定するときは、引数flgをtrueにして渡す
click.click_id.fire({id:"a09", bullet:click01});
click.click_id.fire({id:"a09", bullet:click01,para:"hello world 2014",flg:true});
//上書きされて、"hello"でなく、"hello world 2014"がアラートされる
click.click_id.fire({id:"a10", bullet:click01});
click.click_id.fire({id:"a10", bullet:click01,para:"hello world 2014"});
}
</script>
</body>
</html>
##解説
同じidで2つ以上の関数が登録できない仕様から、@sounisi5011さんの指摘を受けて、改変して、同じidで2つ以上の関数が登録できる仕様に変更した。
1つのクリックイベントを登録するときと、復数のクリックイベントを登録するときで処理を分岐させた。
クリックイベントって同じidに復数の関数登録するときってあんまりないし、あるならそれを明示的にやるほうが、読みやすいコードになるはず。
よって、パラメータflgをtrueにすると同じidにクリックイベントを登録し、パラメータflgがないときは1つのクリックイベントを登録すると明示する仕様とした。
###追記###
@sounisi5011さんの指摘通りgetElementID(id)を格納する変数clickListenerを作ってclick.id_base関数を更に改善した。
###追記2###
click.id_baseからclick.click_idに名前を変更した
##関連
[【Javascript】特定のid付きのp要素をクリックする度にアラートする数字が増加(0にリセット可) ][1]
[1]:http://qiita.com/kyoshiro-obj/items/19e83692b0f96c73cfdd