你的位置:首页 > Java教程

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