Introduction to the difference between dom0-level events and dom2-level events in JS

dom0 level event

 <a href="#" id="hash" onclick="fn();fn();"><button type="button">Return to the above to activate</button></a> var btn=$('#hash').get();btn.onclick=function(){alert('');};btn.onclick=function(){alert('');};

For example, if the onclick is written in the tag above, it is all dom0-level events, and fn and fn1 are executed in sequence; the second type to obtain elements, and bind the onclick event is also dom0-level. The second will overwrite the first onclick, and will also overwrite the onclick in the line, and only 222 will pop up.

dom2 level event

 $('#hash').click(function(){alert('JQ's dom2 first click')});$('#hash').click(function(){alert('JQ's dom2 second click')});btn.addEventListener('click',function(){alert('Native dom2 first click')},false);btn.addEventListener('click',function(){alert('Native dom2 second click')},false);btn.addEventListener('click',function(){alert('Native dom2 second click')},false)

The above bindings are all dom2 event binding. The first two are JQ binding methods, and the latter are native JS binding methods, which will not be overwritten. The JQ binding method and native binding method will be executed in turn. This is to go elsewhere at dom0 level;

dom0 and dom2 coexist

 <a href="#" id="hash" onclick="fn();fn1();"><button type="button">Return to the above to activate</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's dom2 level click for the first time')});btn.addEventListener('click',function(){alert('Native dom2 level first click')},false);</script>

The above example has two dom0 level and two dom3 level binding events. The dom0 level written in js will cover the fn and fn1 methods in the line, but dom0 in js can drink dom2 coexist, and the result is that 111 jq's dom2 level click is popped up. The first time the native dom2 level click is clicked;

The above content is an introduction to the difference between dom0-level events and dom2-level events in JS brought to you by the editor. I hope it will be helpful to you. At the same time, I would like to thank you very much for your support for Wulin.com website!