事件的连带触发（冒泡机制）以及解决方法的详解

事件的冒泡机制
通俗的讲就是指父元素与子元素分别有一个方法，在触发子元素方法的时候父元素的方法也被触发

如下图所示
创建一个div在div下创建一个button子元素，为div绑定一个名为divHandler的点击事件
为button绑定一个名为btnHandler的点击事件

我们希望实现
点击div域时会打印出（点击了inner div的点击事件）
点击按钮时会打印出（点击btn 按钮）

首先点击div
可以看到右边的控制台打印出了（点击了inner div的点击事件）

点击按钮
可以看到不但触发了button的点击方法也触发了div的点击方法

以上就是事件的冒泡机制的表现形式

下面是两种解决方法：
1.在事件触发的底层添加(.stop)
2.为div添加限定机制(.self)

1.在事件的底层添加stop

（stop方法可以彻底的阻止事件的冒泡机制）

2.为div添加限定机制

self方法的作用为：只有当点击当前元素时才会触发事件函数
（此方法解决冒泡有缺陷）

self解决冒泡机制的缺陷展示

最外层的div添加self
内层div不做处理

点击外层div

点击内层div

点击按钮

可以看到在触发了按钮事件的同时内层的div事件也触发了，
只有外层添加了self的div没有触发事件

以上就是事件的冒泡机制及解决方法的总结