javascriptのイベントハンドリング(二)——トランジットプログラミング

IEとDOMビューアの違い
      上記『javascriptの事件処理（一）——基礎原理』の様々な例では、addEvent Listener()によって生成されたイベント傍受は、chromeおよびfirfoxにおいて有効であるが、IEにおいては無効であり、これはDOMに類似した2つの方法がIEによって達成されたためである.atachEvent()とDetachEvent()は、方法値DOMの類似しており、IEはEventをサポートするだけである.追加されたイベントハンドラは発泡段階に追加されます.具体的なコードは以下の通りです.

<button id = 'mybutton5' >Button5</button>
<script type = 'text/javascript'>
    
      var bn5 = document.getElementById('mybutton5');
      bn5.attachEvent('onclick',function(){
        alert('IE attachEvent');
      });
    
      bn5.detachEvent('onclick',function(){
        //do something  
      });
    
</script>

    DOMとは違います
    1.atachEvent()の最初のパラメータは「onclick」、addEVent Listener()は「click」です.
    2.作用域が異なる.atechEvent()では処理プログラムがグローバルスコープで実行されます.thisはwindowに等しいです.DOMレベルの方法では、処理プログラムは所属元素の作用領域で実行されます.
    3.atachEvent()とaddEvent Listener()は同じ要素に複数のイベントハンドラを追加することができ、DOMはそれらを追加する順序で実行され、IEは逆の順序で実行される.
 
    トランジットのイベントハンドラ
    1.自分でプログラムを書きます.原理は簡単です.まず、遊覧器の能力を測定してから、方法を追加します.

<button id = 'mybutton7' >Button7</button>
<script type = 'text/javascript'>
      var EventUtil = function(){};
      EventUtil.prototype.addHadler = function(element,action,hadler){
        if(element.addEventListener){
          alert('addEventListener function');
          element.addEventListener(action,hadler,false);  
        }
        else if(element.attachEvent){
          alert('attachEvent function');
          element.attachEvent('on'+action,hadler); 
        }
        else{
          alert('element["on"+action]');
          element['on'+action] = hadler;
        }
      }
      
      EventUtil.prototype.removeHadler = function(element,action,hadler){
        if(element.removeEventListener){
          element.removeEventListener(action,hadler,false);  
        }
        else if(element.detachEvent){
          element.detachEvent('on'+action,hadler); 
        }
        else{
          element['on'+action] = null;
        }
      
      }
      
      var hadlerfunction = function(){
        alert('hadlefunction');  
      } 
    
      var bn7 = document.getElementById('mybutton7');
      var eu = new EventUtil();
      
      eu.addHadler(bn7,'click',hadlerfunction);   
      
    
</script>

      ここでは、目的のためにオブジェクト指向のロジックを使って、イベントハンドラを登録して削除する方法として、EventUtilというオブジェクトを作成しました.
     
      2.jquery類庫
       jqueryはjavascriptのクラスの一つで、Javascriptのプログラミングを大幅に簡略化することができます.

<script type = 'text/javascript' src = './jquery.js'></script>
<script type = 'text/javascript'>
    $(document).ready(function(){
      $('#mybutton6').click(function(){
        alert('jquery button6 ');  
      });
    });
</script>  
  

<button id = 'mybutton6' >Button6</button>

     
この二つの文章は主に自分の学習ノートで、大部分の内容は「javascript高級プログラム設計」の中の事件の一章を参照することができます.