イベントハンドラ

イベントとは、ユーザまたはブラウザ自身が実行するある動作のことで、例えば、click、ロードなどは、イベントの名前であり、応答イベントの関数をイベントハンドラといい、イベントハンドラの名前は「on」で始まり、例えば、clickイベントのイベントハンドラはon loadである.
HTMLイベントハンドラ
各要素がサポートするイベントごとに、対応するイベントハンドラと同名のHTML特性を使用して指定できます.例えば、ボタンをクリックした時にいくつかのjavascriptを実行します.コードは以下の通りです.

      function showMessage(){
          alert("hello world!");
      }
<input type="button" value="Click Me" onclick="showMessage()" />
</code></pre> 
 <p>showMessage()         <script>      ，             ，        ：</p> 
 <ul> 
  <li>    </li> 
 </ul> 
 <ol> 
  <li>                ，            event（    ）</li> 
  <li>       ，this          </li> 
 </ol> 
 <ul> 
  <li>  </li> 
 </ul> 
 <ol> 
  <li>      </li> 
  <li>                             </li> 
  <li>HTML javascript      ，           ，    HTML   javascript      （  js         ），       HTML          Javascript        。</li> 
 </ol> 
 <h2>DOM0       </h2> 
 <p>  JavaScript             ，                    。</p> 
 <ul> 
  <li>    （  window document)             ，          ， onclick。             ，           。</li> 
 </ul> 
 <pre><code> var btn=document.getElementById("myBtn");
         btn.onclick=function(){
            alert("Clicked");
         };
</code></pre> 
 <p>  ：                  ，                  ，                   。</p> 
 <ul> 
  <li>  DOM0                     。  ，                     ；    ，   this      。            this            。</li> 
 </ul> 
 <pre><code> var btn=document.getElementById("myBtn");
       btn.onclick=function(){
             alert(this.id);//"myBtn"
       };
</code></pre> 
 <p>  ：                          。</p> 
 <ul> 
  <li>      DOM0            ： btn.onclick=null; //        <br>       HTML        ，  onclick              HTML           。        null，                   。</li> 
 </ul> 
 <h2>DOM2       </h2> 
 <p>DOM2          ，                  ：<strong>addEventListener()</strong> <strong>removeEventListener()</strong>。  DOM          ，       3   。       、                 。    true               ；false               。        ，                  。</p> 
 <ul> 
  <li> DOM2                           ：</li> 
 </ul> 
 <pre><code>    var btn=document.getElementById("myBtn");
            btn.addEventListener("click",function(){
                alert(this.id);
            },false);
            btn.addEventListener("click",function(){
                alert("Hello world!");
            },false);
</code></pre> 
 <p>                     </p> 
 <ul> 
  <li>  addEventListener()             removeEventListener()    。                    。       addEventListener()           。</li> 
 </ul> 
 <pre><code>    var btn=document.getElementById("myBtn");
            btn.addEventListener("click",function(){
                alert(this.id);
            },false);
            btn.removeEventListener("click",function(){
                alert(this.id);
            },false);//   ！          ，           addEventListener()               
</code></pre> 
 <p>           ：</p> 
 <pre><code>    var btn=document.getElementById("myBtn");
           var handler=function(){
               alert(this.id);
           };
            btn.addEventListener("click",handler,false);
            btn.removeEventListener("click",handler,false);
</code></pre> 
 <h2>IE      </h2> 
 <p>IE    DOM        ：<strong>attachEvent() detachEvent()</strong>。              ：                 。  IE8            ，    attachEvent()                   。</p> 
 <pre><code>     var btn=document.getElementById("myBtn");
            btn.attachEvent("onclick",function(){   // onclick，  addEventListener（） click
                 alert(this.id);
             });
</code></pre> 
 <ul> 
  <li> IE   attachEvent()   DOM0                   。DOM0            ； attachEvent()           ，  this=window。</li> 
 </ul> 
 <pre><code>    1 var btn=document.getElementById("myBtn");
    2         btn.attachEvent("onclick",function(){
    3              alert(this===window);  //true
    4          });
</code></pre> 
 <ul> 
  <li> addEventListener()  ，attachEvent()                    。    attachEvent()            ，          。</li> 
  <li>    attachEvent()                 ，     detachEvent()    。</li> 
 </ul> 
 <h2>           </h2> 
 <p>               。                        ，        。</p> 
 <pre><code>    var EventUtil={
       //       DOM0   、DOM2   、IE     /    ，  3   ：
              、    、        。
            addHandler:function(element,type,handler){
                if(element.addEventListener){
                    element.addEventListener(type,handler,false);
                } else if(element.attachEvent){
                    element.attachEvent("on"+type,handler);
                } else{
                    element["on"+type]=handler;
                }
            },
            removeHandler:function(element,type,handler){
                if(element.removeEventListener){
                    element.removeEventListener(type,handler,false);
                } else if(element.detchaEvent){
                    element.detchaEvent("on"+type,handler);
                } else{
                    element["on"+type]=null;
                }
            }
        };
</code></pre> 
 <p>                  ：</p> 
 <pre><code>    var btn=document.getElementById("myBtn");
        var handler=function(){
            alert("Clicked");
        };
        EventUtil.addHandler(btn,click,handler);
        //    
        EventUtil.removeHandler(btn,click,handler);
</code></pre> 
 <p>addHandler() removeHandler()             ，  IE       。  ，                    。      ，DOM0               。    DOM0          。</p> 
</article>
                            </div>
                        </div>
                    </div>
                    <!--PC WAP    -->
                    <div id="SOHUCS" sid="1184467297562107904"></div>
                    <script type="text/javascript" src="/views/front/js/chanyan.js">