javascript的事件處理（二）——跨遊覽器編程

      IE 與DOM遊覽器的區別

      在上文《javascript的事件處理（一）——基礎原理》中的各種例子，addEventListener()產生的事件監聽在chrome和firfox中有效，但在IE中是無效，這是因為IE實現了類似與DOM中類似的兩個方法:attachEvent()和detachEvent()，使用方法值DOM的相類似，不同的是IE只支援事件冒泡，所以通過attachEvent()添加的事件處理常式都會被添加到冒泡階段。具體代碼如下：

<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. attachEvent()的第一個參數時“onclick”，而addEVentListener()則是“click”。

    2. 範圍不同。attachEvent()中處理常式會在全域範圍中運行，this等於window，而DOM級方法中，處理常式會在所屬元素的範圍中運行。

    3. attachEvent()和addEventListener()都可以為同一元素添加多個事件處理常式，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的對象，它有兩個方法addHadler和removeHadler，分別用來註冊和刪除事件處理常式。

     

      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進階程式設計》中的事件一章。