javascriptイベントバインディングの違いと互換性

DOM0レベルのバインディングとDOM2レベルのバインディングの違いと互換性

1.違い

1. イベントでは任意のブラウザとの互換性をサポートし、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はキャプチャフェーズイベントを1回サポートします（関数は1回実行されてから破棄されます）

5. 削除の方法は異なります。イベントの使用時：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);
            }
        }