事件绑定与取消

1.2 事件绑定与取消

1.2.1 事件绑定

• 标准浏览器：标签.addEventListener（事件类型[不加on],事件处理函数，是否捕获）

• ie浏览器：标签.attachEvent（事件类型[加on],事件处理函数）

• 区别：

  • 标准浏览器不加on，ie加on
  • 标准浏览器有捕获，ie没有捕获
  • 标准浏览器按添加顺序执行，ie低版本倒序执行
  • 标准浏览器this指触发事件的对象，ie this指window

  //1.标准浏览器绑定：标签.addEventListener(事件类型[不加on]，事件处理函数，是否捕获)
  oDiv.addEventListener("click",fun1);
  oDiv.addEventListener("click",fun2);
  
  //2.ie浏览器绑定：标签.attachEvent(事件类型[加on],事件处理函数)  没有捕获
  oDiv.attachEvent("onclick",fun2);
  oDiv.attachEvent("onclick",fun1);
  
  //3.兼容
  if(oDiv.addEventListener){
      oDiv.addEventListener("click",fun1);
  }else{
      oDiv.attachEvent("onclick",fun1);
  }
  

1.2.2 事件取消

不同的添加方式需要使用不同的取消方式

添加方式	取消方式
标签.事件	标签.事件=null
标签.addEventListener(类型，处理函数)	标签.removeEventListener(类型，处理函数)
标签.attachEvent(类型,处理函数)\	标签.detachEvent(类型,处理函数)

//1.简单事件的添加
oBtn.onclick = function(){
    console.log(arr[getRandom(0,arr.length-1)]);
    oBtn.onclick = null; //取消
}

//2.绑定的添加
function fun1(){
    console.log(arr[getRandom(0,arr.length-1)]);
    //oBtn.removeEventListener("click",fun1);  标准浏览器取消
    //oBtn.detachEvent("onclick",fun1);//ie浏览器取消
    if(oBtn.removeEventListener){
        oBtn.removeEventListener("click",fun1);
    }else{
        oBtn.detachEvent("onclick",fun1);
    }
}