La diferencia y compatibilidad del enlace de eventos javascript

La diferencia y compatibilidad entre el enlace de nivel DOM0 y el enlace de nivel DOM2

1. Diferencia

1. on event admite compatibilidad con cualquier navegador, addEventListener solo es compatible con IE8 y superior

2. El evento on en realidad vincula un atributo fijo al DOM. Por ejemplo, onclick es para vincular una función anónima al elemento, lo que significa que el valor del atributo original se sobrescribirá al realizar la asignación nuevamente, y addEventListener es la función de devolución de llamada utilizada. La configuración de funciones de devolución de llamada de múltiples eventos no se sobrescribirá

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

3. El evento on utiliza una función anónima, lo que conducirá a un infierno de devolución de llamada fácilmente durante el desarrollo. El uso de addEventListener puede controlar eficazmente la generación del infierno de devolución de llamada.

    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. El evento on no admite la fase de captura, mientras que addEventListener admite el evento de la fase de captura y una vez (la función se ejecuta una vez y luego se destruye)

5. El método de eliminación es diferente. Uso de on event: eliminación de formulario nulo, addEventListener usa removeEventListener para eliminar el evento

6. El evento on es el tipo de evento predeterminado del sistema, y ​​addEventListener puede establecer un evento de activación personalizado

   var btn = document.querySelector('button');
           btn.addEventListener('dianji',function() {
         
         
               console.log('我被触发了');
           })
           var  evt = new Event('dianji');//创建自定义事件
           btn.dispatchEvent(evt);//触发自定义事件
   //先监听后触发
   

2. Manejo compatible

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