JS中dom0級事件和dom2級事件的區別介紹
阿新 • • 發佈：2020-11-30
dom0級事件
| 1 2 3 4 5 6 7 8 9 10 |
<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事件也是dom0級，第二個會覆蓋第一個onclick，也會覆蓋行內的onclick，只會彈出222。
dom2級事件
| 1 2 3 4 5 6 7 8 9 10 11 12 |
$('#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級事件繫結，前面兩種都是jq的繫結方式，後面都是原生js的繫結方式，不會覆蓋，會依次執行jq的繫結方法和原生的繫結方法，這就是於dom0級的去別處；
dom0和dom2共存
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
<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>
|
上面的例子有一個兩個dom0級和兩個dom3級繫結事件，js裡面寫的dom0級會覆蓋行內的fn和fn1方法，但是js裡面的dom0可以喝dom2共存，結果是彈出111 jq的dom2級點選第一次 原生dom2級第一次click；
以上內容是JS中dom0級事件和dom2級事件的區別介紹