javascript事件绑定的区别以及兼容

DOM0级绑定与DOM2级绑定的区别以及兼容

1.区别

1. on事件支持任何浏览器兼容，addEventListener只支持IE8及其以上版本支持

2. on事件实际是给DOM绑定了一个固定的属性，例如onclick就是给元素绑定一个匿名函数，这就意味着再次赋值的时候原来的属性值会被覆盖，而addEventListener是使用的回调函数，可以设置多个事件回调函数不会被覆盖

    bn.onclick=function(){
               console.log("aa");
               // 这里时当点击时调用的匿名函数
           }
           bn.onclick=function(){
               console.log("bb");
           }
   

3. 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");
                       }
                   }
               }
           }
   
   

4. on事件不支持捕获阶段，而addEventListener支持捕获阶段阶段事件和once(函数执行一次后销毁)

5. 删除方式不同on事件使用：null形式删除，addEventListener使用removeEventListener删除事件

6. 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);
            }
        }