Differences between dom0-level events and dom2-level events in JS, dom0dom2

Differences between dom0-level events and dom2-level events in JS, dom0dom2

Dom0-level events

<A href = "#" id = "hash" onclick = "fn (); "> <button type =" button "> return to the above for activation </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, all events are dom0-level events, and fn and fn1 are executed in sequence. The second method obtains elements and binds the onclick event to dom0-level events. The second method overwrites the first onclick event, it will also overwrite the onclick in the row, and only 222 will pop up.

Dom2 events

$ ('# Hash '). click (function () {alert ('first dom2 level of jq')}); $ ('# hash '). click (function () {alert ('second dom2 level of jq')}); btn. addEventListener ('click', function () {alert ('native dom2 level first click')}, false); btn. addEventListener ('click', function () {alert ('second native dom2 click')}, false)

All of the above bindings belong to the dom2-level event binding. The first two are jq binding methods, which are followed by native js binding methods and will not be overwritten, jq binding methods and native binding methods will be executed in sequence, which is at the dom0 level;

Coexistence of dom0 and dom2

<A href = "#" id = "hash" onclick = "fn (); fn1 (); "> <button type =" button "> return to the above for activation </button> </a> <script type =" text/javascript "> function fn () {alert ('ade ');} function fn1 () {alert ('ade211');} var btn = $ (' # hash '). get (0); btn. onclick = function () {alert ('000000') ;};$ ('# hash '). click (function () {alert ('dom2 level of jq')}); btn. addEventListener ('click', function () {alert ('native dom2 level first click')}, false); </script>

In the above example, there are two dom0-level and two dom3-level binding events. The dom0-level written in js will overwrite the fn and fn1 methods in the row, but the dom0 in js can coexist with dom2, the result is the first native dom2 level click in the dom2 level of 111 jq pop-up;

The above content is a brief introduction to the differences between dom0-level events and dom2-level events in JavaScript code. I hope to help you and thank you very much for your support for the help House website!