javascriptのaddEventListenerの使い方【備忘録】

addEventListenerの使い方

<!--フォームのinput:type=textにid=id-inputを指定-->
<input type="text" name="name-input" id="id-input" >
<!--フォームのinput:type=submitにid=id-submitを指定-->
<input type="submit" name="name-submit" id="id-submit" >

<!--メッセージを表示する部分(div)-->
<div id="alert"></div>
<div id="alert-no-name"></div>

<!--javascriptのコード-->
<script>
/*getElementById()でid-inputを探す*/
var input_text;
input_text = document.getElementById("id-input");

/*getElementById()でid-submitを探す*/
var submit_button;
submit_button = document.getElementById("id-submit");

/*addEventListenerをユーザーが使用しているブラウザで使用出来たら*/
if(document.addEventListener){

   /*addEventListenerでfocusイベントを指定して関数名を記述して呼び出す*/
   input_text.addEventListener("focus",input_focus);

   /*addEventListenerでclickイベントを指定して関数名を記述して呼び出す*/
   submit_button.addEventListener("click",submit_click,false);

}else if(!document.addEventListener){

   /*IE対策*/
   /*attachEventでonfocusイベントを指定して関数名を記述して呼び出す*/
   input_text.attachEvent("onfocus",input_focus);

   /*attachEventでonclickイベントを指定して関数名を記述して呼び出す*/
   submit_button.attachEvent("onclick",submit_click);

}

/*呼び出す関数一覧*/
function input_focus(event){
     document.getElementById("alert").innerHTML = "フォーカスされました。【function】";
}

function submit_click(event){
    document.getElementById("alert").innerHTML="送信ボタンが押されました。【function】";
}

/*無名関数でaddEventListenerを使ってみる*/
if(document.addEventListener){

   input_text.addEventListener(
      "focus",
      function(event){
         document.getElementById("alert-no-name").innerHTML = "フォーカスされました。【無名】";
      }
      ,false
   );

   submit_button.addEventListener(
      "click",
      function(event){
         document.getElementById("alert-no-name").innerHTML="送信ボタンが押されました。【無名】";
      }
      ,false
   );

}else if(!document.addEventListener){

   /*IE対策*/
   input_text.attachEvent(
      "onfocus",
      function(event){
         document.getElementById("alert-no-name").innerHTML="フォーカスされました。【無名IE】";
      }
   );

   submit_button.attachEvent(
      "onclick",
      function(event){
         document.getElementById("alert-no-name").innerHTML="送信ボタンが押されました。【無名IE】";
      }
   );

}
</script>