javaScript中的事件三

javaScript中的事件三

先看两种错误的写法,他们的目的都是:添加两个事件;

错误方式一:

  window.onload=function (){
    alert('event 1');  
  }
  window.onload=function (){
    alert('event 2')  
  }

错误方式二:

window.onload=function (){
    var obj=document.getElementById("but");
    obj.onclick=function(){
     alert('event 1');    
    }
    obj.onclick=function(){
     alert('event 2');    
    }
  }

结果他们弹出的都是 event 2

正确的写法:(ie下的attachEvent 事件顺序还是有问题的,有待优化)

 function addEvent(obj,eventName,fn){
     //还要考虑到兼容性的问题
     if(obj.attachEvent!=undefined){
        //这个是ie下面的
        obj.attachEvent('on'+eventName,fn);
        //这里还值得注意的是在ie6-8 中事件事件的顺序和你注册的事件时相反的呀
        //还有在ie下的事件是有 on 关键字滴呀
        //在ff 和chrome 中是没有的
     }else{
        //这个是chrome 和ff 下的
        obj.addEventListener(eventName,fn,false);
     }
 }
 
  window.onload=function (){
    var obj=document.getElementById("but");
    addEvent(obj,'click',function (){
        alert('event 1');    
    });  
    addEvent(obj,'click',function (){
        alert('event 2');    
    });
  }

事件可以绑定,那么事件就是可以解除滴呀;解除的方式如下:

//这里是我们的注册事件
 function addEvent(obj,eventName,fn){
     //还要考虑到兼容性的问题
     if(obj.attachEvent!=undefined){
        //这个是ie下面的
        obj.attachEvent('on'+eventName,fn);
        //这里还值得注意的是在ie6-8 中事件事件的顺序和你注册的事件时相反的呀
        //还有在ie下的事件是有 on 关键字滴呀
        //在ff 和chrome 中是没有的
     }else{
        //这个是chrome 和ff 下的
        obj.addEventListener(eventName,fn);
     }
 }
 //这是我们额取消事件的呀
  function subEvent(obj,eventName,fn){
      if(obj.attachEvent!=undefined){
          obj.detachEvent('on'+eventName,fn);
      }else{
          obj.removeEventListener(eventName,fn);
      }
  }
  function alertA(){
    alert('event 1');  
  }
  function alertB(){
    alert('event 2');  
  }
  window.onload=function (){
    var obj=document.getElementById("but");
    addEvent(obj,'click',alertA);  
    addEvent(obj,'click',alertB);
    
    //如果我们执行下面的方法,那么我们取消了注册的事件滴呀
    subEvent(obj,'click',alertA);
    subEvent(obj,'click',alertB);
    
  }
  

还有有一个事件捕获的概念(仅仅在我们的ie中才有的事件滴呀)

 window.onload=function (){
     var obj=document.getElementById("but");
     obj.onclick=function (){
        alert('click event '); 
     }
     //这个东西只能在ie中使用滴呀
     obj.setCapture();
     //接下来,你在页面的中任何地方执行一个onclick事件,
     //该事件都会在button中进行触发的呀,这个就是我们的事件捕获滴呀
 }

 释放捕获的方法:

obj.releaseCapture();

posted @ 2016-02-21 18:20  咕-咚  阅读(209)  评论(0编辑  收藏  举报