JS_javascript スキルにおける dom0 レベルのイベントと dom2 レベルのイベントの違いの紹介

ドムレベル0イベント

<a href="#" id="hash" onclick="fn();fn();">
<button type="button">返回上面进行开通</button>
</a> 
var btn=$('#hash').get();
btn.onclick=function(){
alert('');
};
btn.onclick=function(){
alert('');
}; 

上記のようにタグに onclick を記述することは dom0 レベルのイベントであり、fn と fn1 が順番に実行されます。要素を取得して onclick イベントをバインドする 2 番目の方法も dom0 レベルで行われ、2 番目の方法は dom0 レベルのイベントを上書きします。最初の onclick は、行内の onclick をオーバーライドすると 222 のみポップアップします。

dom2 レベルイベント

$('#hash').click(function(){
alert('jq的dom2级点击第一次')
});
$('#hash').click(function(){
alert('jq的dom2级点击第二次')
});
btn.addEventListener('click',function(){
alert('原生dom2级第一次click')
},false);
btn.addEventListener('click',function(){
alert('原生dom2级第二次click')
},false) 

上記のバインディングはすべて DOM2 レベルのイベント バインディングです。最初の 2 つは jq バインディング メソッドであり、後の 2 つはネイティブの js バインディング メソッドであり、jq バインディング メソッドとネイティブのバインディング メソッドを順番に実行します。バインディング メソッド。これは dom0 レベルの別の場所に移動します。

dom0 と dom2 が共存します

<a href="#" id="hash" onclick="fn();fn1();">
<button type="button">返回上面进行开通</button>
</a>
<script type="text/javascript">
function fn(){
alert('ade');
}
function fn1(){
alert('ade111');
}
var btn=$('#hash').get(0);
btn.onclick=function(){
alert('111');
};
$('#hash').click(function(){
alert('jq的dom2级点击第一次')
});
btn.addEventListener('click',function(){
alert('原生dom2级第一次click')
},false);
</script> 

上記の例には 2 つの dom0 レベルと 2 つの dom3 レベルのバインディング イベントがあります。js で記述された dom0 レベルは行内の fn メソッドと fn1 メソッドをオーバーライドしますが、js の dom0 は dom2 と共存でき、結果は 111 になります。 jq の dom2 レベルの最初のクリックは、ネイティブ dom2 レベルが初めてクリックされたときです。

上記の内容は、JS における dom0 レベルのイベントと dom2 レベルのイベントの違いについての編集者の紹介です。同時に、スクリプトのサポートに非常に感謝しています。ハウスのウェブサイトです！