Introduction to the difference between dom0 level events and dom2 level events in JS_javascript skills

dom level 0 event

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

Writing onclick in the tag like above is a dom0 level event, and fn and fn1 are executed in sequence; the second way to get an element and bind an onclick event is also at dom0 level, and the second one will overwrite the first onclick. Overriding the onclick within the row will only pop up 222.

dom2 level event

$('#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)

The above bindings are all DOM2-level event bindings. The first two are jq binding methods, and the latter two are native js binding methods. They will not be overwritten and will execute jq binding methods and native ones in sequence. The binding method, this is to go elsewhere at dom0 level;

dom0 and dom2 coexist

<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>

The above example has two dom0 level and two dom3 level binding events. The dom0 level written in js will override the fn and fn1 methods in the line, but dom0 in js can coexist with dom2, and the result is 111. The first click of jq’s dom2 level is the first time the native dom2 level is clicked;

The above content is the editor’s introduction to the differences between dom0-level events and dom2-level events in JS. I hope it will be helpful to you. At the same time, I am very grateful for your support of the Script House website!