DOM0レベルのバインディングとDOM2レベルのバインディングの違いと互換性
1.違い
-
イベントでは任意のブラウザとの互換性をサポートし、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はキャプチャフェーズイベントを1回サポートします(関数は1回実行されてから破棄されます)
-
削除の方法は異なります。イベントの使用時: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);
}
}