先说一下定义吧，其实冒泡和捕获太正式，其实就是执行顺序，咱们说点通俗易懂的。
比如有一个div嵌套：
<div id="parent"> parent
<div id="child" > child</div>
</div>
事件冒泡和捕获是两个完全相反的顺序。
事件冒泡：自下而上；事件执行顺序，先执行child绑定的方法，后执行parent绑定的方法。
事件捕获：自上而下；事件执行顺序，先执行parent绑定的方法，后执行child绑定的方法。
再说一下浏览器是按照哪种方式绑定事件的，第三个参数默认是false=冒泡，true=捕获document.getElementById("parent").addEventListener('click',function(){},false)
ok介绍完上面的信息。我们测试一下。
这是效果截图：自己切换绑定方式，然你1秒就懂。
附上demo地址：
https://github.com/shuihan03/tell-me-why/blob/master/maopao.html复制代码你也可以直接拷贝下面的代码即可：
<html>
<style>
.parent{
width: 200px;
height: 200px;
border: 1px solid red;
position: relative;
}
.child{
width: 50px;
height: 50px;
border: 1px solid red;
position: absolute;
margin: 50px;
}
</style>
<div>
<label><input name="event-pattern" type="radio" value="" checked οnclick="setEventBindPattern('bubble')" />事件冒泡
</label>
<label><input name="event-pattern" type="radio" value="" οnclick="setEventBindPattern('catch')" />事件捕获 </label>
</div>
<div id="parent" class="parent"> parent
<div id="child" class="child"> child</div>
</div>
<script type="text/javascript">
// 第三个参数默认为false;false=冒泡;true=捕获；
//document.getElementById("parent").addEventListener('click',function(){},false)
function eventParent(){
alert("parent事件被触发，" + this.id);
}
function eventChild(){
alert("child事件被触发，" + this.id);
}
function setEventBindPattern(eventType) {
//解绑事件
document.getElementById("parent").removeEventListener('click',eventParent);
document.getElementById("child").removeEventListener('click',eventChild);
if (eventType === 'bubble') {
//事件冒泡
document.getElementById("parent").addEventListener("click",eventParent)
document.getElementById("child").addEventListener("click", eventChild)
} else {
//事件捕获
document.getElementById("parent").addEventListener("click",eventParent,true)
document.getElementById("child").addEventListener("click", eventChild,true)
}
}
setEventBindPattern('bubble');//初始化默认为冒泡
</script>
</html>
因为本人使用的是Vue技术栈，在项目中也遇到过事件冒泡带来的问题
因为父子两级div绑定不同事件，结果点击子div总是会冒泡到父级事件，
但是，，，，，这不是我想要的结果。
其实Vue早就封装了阻止冒泡的方法；click后面添加.stop即可，不会继续向上冒泡。
@click.stop="onClickRow(rowChild)
扫一扫
191
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
