【Javascript】特定のid付きのdiv要素をクリックして特定の関数を実行させる

```html:


<!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&&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