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高级程序设计》中的事件一章。