zoukankan      html  css  js  c++  java
  • dom0级事件和dom2级事件

    dom0级事件

    1 <a href="#"  id="hash" onclick="fn();fn1();">
    2     <button type="button">返回上面进行开通</button>
    3 </a>
    1     var btn=$('#hash').get(0);
    2     btn.onclick=function(){
    3         alert('111');
    4     };
    5     btn.onclick=function(){
    6         alert('222');
    7     };

    像上面把onclick写在标签内,都是dom0级事件,fn和fn1依次执行;   第二种获取元素,绑定onclick事件也是dom0级,第二个会覆盖第一个onclick,也会覆盖行内的onclick,只会弹出222。

    dom2级事件

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

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

  • 相关阅读:
    基于摸板匹配的目標跟蹤算法
    spoj 2713 Can you answer these queries IV
    zoj 3633 Alice's present
    hdu 3642 Get The Treasury
    poj 1195 Mobile phones
    poj 2760 End of Windless Days
    zoj 3540 Adding New Machine
    spoj 1716 Can you answer these queries III
    spoj 1043 Can you answer these queries I
    spoj 2916 Can you answer these queries V
  • 原文地址:https://www.cnblogs.com/module/p/5461787.html
Copyright © 2011-2022 走看看