js 事件捕获与事件冒泡例子
Posted Artificial Intelligence
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了js 事件捕获与事件冒泡例子相关的知识，希望对你有一定的参考价值。
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 事件捕获与事件冒泡例子的主要内容，如果未能解决你的问题，请参考以下文章