码迷,mamicode.com
首页 > Web开发 > 详细

js 事件捕获与事件冒泡例子

时间:2016-04-04 22:56:22      阅读:413      评论:0      收藏:0      [点我收藏+]

标签:

http://codepen.io/huashiyiqike/pen/qZVdag

addEventListener 默认是冒泡阶段执行,也就是父亲与子都监听时,点击子,子先处理,父亲再处理,这时加stopPropagation()可以阻止父亲的处理事件。设置true反过来,这事加了stopPropagation()可以阻止子的处理事件。

jquery 只支持冒泡。

<html>
<body id="myid2" class="mystyle your">
 <div id="myid"> father
  <div class="2"> son</div>
  </div>
  

<div id="jmyid"> jqueryfather
<div class="j2"> jqueryson</div>
</div>

<script type="text/javascript">

document.getElementById("myid").addEventListener("click",function(e){alert("father called"); },true);
document.getElementsByClassName("2")[0].addEventListener("click",function(e){alert("son called");e.stopPropagation();},true);
x=document.getElementsByTagName(‘body‘)[0];
$("#jmyid").click(function(event){
alert("jquery father called");
event.stopPropagation();
});
$(".j2").click(function(event){
alert("jquery son called");
//event.stopPropagation();
return false;
});



document.write("Body CSS class: " + x.className);
document.write("<br />");
document.write("An alternate way: ");
document.write(document.getElementById(‘myid‘).className);

</script>

</body>
</html>

 

js 事件捕获与事件冒泡例子

标签:

原文地址:http://www.cnblogs.com/huashiyiqike/p/5353093.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!