javaScript中的事件三

Posted 2020-06-14

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();