关于js事件冒泡、阻止事件冒泡

关于js事件冒泡、阻止事件冒泡

一、事件冒泡

    当事件发生后，这个事件就要开始传播(从里到外或者从外向里)。为什么要传播呢？因为事件源本身（可能）并没有处理事件的能力，即处理事件的函数（方法）并未绑定在该事件源上。例如我们点击一个按钮时，就会产生一个click事件，但这个按钮本身可能不能处理这个事件，事件必须从这个按钮传播出去，从而到达能够处理这个事件的代码中（例如我们给按钮的onclick属性赋一个函数的名字，就是让这个函数去处理该按钮的click事件），或者按钮的父级绑定有事件函数，当该点击事件发生在按钮上，按钮本身并无处理事件函数，则传播到父级去处理。（简洁一点就是：当我们点击一个控件的时候，如果包括这个控件的父控件也有click事件，则会继续执行。）

（ 事件冒泡用图形表示就如以上所示 ）

---

二、解决冒泡事件

（我举下面例子实现的功能就是点击最上边的小盒子div弹出一个弹出框，然后点击下边的大盒子div弹出一个弹出框,最后点击body内容区弹出一个弹出框，那么阻止冒泡事件后顺序，就如语言描述点击顺序一样）

首先我在页面上写两个盒子如下代码：

（一个盒子包含一个盒子）

然后获取两个盒子的id

(获取两个盒子id)

给盒子加点击事件，这时你会发现出现冒泡事件，（在这里我直接把阻止事件冒泡的解决方案写出来）重点也标注出来了

（上边标记的就是阻止冒泡的重要代码）

（以上就是我今天给大家分享了简洁明了的方法（阻止事件冒泡）！）