DOM0级绑定与DOM2级绑定的区别以及兼容
1.区别
-
on事件支持任何浏览器兼容,addEventListener只支持IE8及其以上版本支持
-
on事件实际是给DOM绑定了一个固定的属性,例如onclick就是给元素绑定一个匿名函数,这就意味着再次赋值的时候原来的属性值会被覆盖,而addEventListener是使用的回调函数,可以设置多个事件回调函数不会被覆盖
bn.onclick=function(){ console.log("aa"); // 这里时当点击时调用的匿名函数 } bn.onclick=function(){ console.log("bb"); }
-
on事件多用匿名函数,这会导致很容易在开发时产生回调地狱,使用addEventListener可以有效的控制回调地狱的产生
var div0=document.querySelector(".div0"); var div1=document.querySelector(".div1"); var div2=document.querySelector(".div2"); var div3=document.querySelector(".div3"); var div4=document.querySelector(".div4"); div1.onclick=function(){ div2.onclick=function(){ div3.onclick=function(){ div4.onclick=function(){ console.log("aaa"); } } } }
-
on事件不支持捕获阶段,而addEventListener支持捕获阶段阶段事件和once(函数执行一次后销毁)
-
删除方式不同on事件使用:null形式删除,addEventListener使用removeEventListener删除事件
-
on事件为系统默认的事件类型,而addEventListener可以设置自定义的触发事件
var btn = document.querySelector('button'); btn.addEventListener('dianji',function() { console.log('我被触发了'); }) var evt = new Event('dianji');//创建自定义事件 btn.dispatchEvent(evt);//触发自定义事件 //先监听后触发
2.处理兼容
function addEvent(elem,type,callback,bool){
//如果没有传入bool则默认为捕获
if(bool==undefined) bool=false;
if(elem.addEventListener){
elem.addEventListener(type,callback,bool);
}else{
elem.attachEvent("on"+type,callback);
}
}