JS中dom0級(jí)事件和dom2級(jí)事件的區(qū)別介紹

字號(hào):


    這篇文章主要介紹了JS中dom0級(jí)事件和dom2級(jí)事件的區(qū)別介紹,非常有參考價(jià)值,特此分享到腳本之家平臺(tái)供大家參考
    dom0級(jí)事件
    <a href="#" id="hash" onclick="fn();fn();">
    <button type="button">返回上面進(jìn)行開(kāi)通</button>
    </a> 
    var btn=$('#hash').get();
    btn.onclick=function(){
    alert('');
    };
    btn.onclick=function(){
    alert('');
    };
    像上面把onclick寫在標(biāo)簽內(nèi),都是dom0級(jí)事件,fn和fn1依次執(zhí)行; 第二種獲取元素,綁定onclick事件也是dom0級(jí),第二個(gè)會(huì)覆蓋第一個(gè)onclick,也會(huì)覆蓋行內(nèi)的onclick,只會(huì)彈出222。
    dom2級(jí)事件
    $('#hash').click(function(){
    alert('jq的dom2級(jí)點(diǎn)擊第一次')
    });
    $('#hash').click(function(){
    alert('jq的dom2級(jí)點(diǎn)擊第二次')
    });
    btn.addEventListener('click',function(){
    alert('原生dom2級(jí)第一次click')
    },false);
    btn.addEventListener('click',function(){
    alert('原生dom2級(jí)第二次click')
    },false)
    以上的綁定都屬于dom2級(jí)事件綁定,前面兩種都是jq的綁定方式,后面都是原生js的綁定方式,不會(huì)覆蓋,會(huì)依次執(zhí)行jq的綁定方法和原生的綁定方法,這就是于dom0級(jí)的去別處;
    dom0和dom2共存
    <a href="#" id="hash" onclick="fn();fn1();">
    <button type="button">返回上面進(jìn)行開(kāi)通</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級(jí)點(diǎn)擊第一次')
    });
    btn.addEventListener('click',function(){
    alert('原生dom2級(jí)第一次click')
    },false);
    </script>
    上面的例子有一個(gè)兩個(gè)dom0級(jí)和兩個(gè)dom3級(jí)綁定事件,js里面寫的dom0級(jí)會(huì)覆蓋行內(nèi)的fn和fn1方法,但是js里面的dom0可以喝dom2共存,結(jié)果是彈出111 jq的dom2級(jí)點(diǎn)擊第一次 原生dom2級(jí)第一次click;
    以上內(nèi)容是小編給大家?guī)?lái)的JS中dom0級(jí)事件和dom2級(jí)事件的區(qū)別介紹 ,希望對(duì)大家有所幫助