事件绑定各方法及兼容性写法

1事件绑定

事件是用户或浏览器自身执行的某种动作，如click,响应某个事件的函数就叫做事件处理程序或事件监听器，事件处理程序的名字以On开头，如onclick.

 首先DOM0级事件处理，

var btn=document.getElementById('myBtn');

btn.οnclick=function(){

alert('this.id')//nyBtn

}

删除 btn.οnclick=null;

没有兼容性问题，但相同函数只能执行一次，否则覆盖。事件处理程序是在元素的作用域运行，this指的当前元素

DOM2级事件处理，

var btn=document.getElementById('myBtn');

var handler=function(){alert(this.id)}//移除和添加,参数要相同，所以要先定义赋值，不然不生效

btn.addEventListener('click',handler,false)/第三个参数false表示冒泡，true表示捕获//myBtn

btn.removeEventListener(''click'',handler,false)//移除

dom2级可以添加多个事件处理程序,执行顺序按添加顺序。

IE事件处理程序

var btn=document.getElementById('myBtn');

var handler=function(){alert(this===window)}//移除和添加,参数要相同，所以要先定义赋值，不然不生效

btn.attachEvent('onclick',handler)//两个参数，只在冒泡阶段执行//true

btn.detachEvent('onclick',handler)//移除

可以添加多个事件处理程序,执行顺序和添加顺序相反。

兼容性处理

参考高级程序设计，用以下方式

 var EventHandler={
　　        addHandler:function(element,type,func){
　　            if(element.addEventListener){   //判断是否存在dom2方法
　　                element.addEventListener(type,func,false);
　　            }else if(element.detachEvent){  //是否为IE8及以前
 　　               element.attachEvent('on'+type,func);
 　　           }else{
  　　              element['on'+type]=func;  //其他情况
  　　          }
　　        },
　　        removerHandler:function(element,type,func){
　　            if(element.removeEventListener){
　　                element.removeEventListener(type,func,false);
　　            }else if(element.detachEvent){
 　　               element.detachEvent('on'+type,func);
 　　           }else{
　　                element['on'+type]=null;
  　　          }
   　　     }
　　    }

var btn=document.getElementById('myBtn');

var handler=function(){alert(666)};

EventUtil.addHandler(btn,'click',handler);//添加事件

EventUtil.removeHandler(btn,'click',handler);//移除事件

 

转载于:https://www.cnblogs.com/cumting/p/6719430.html