# 事件冒泡及阻止 当一个元素接收到事件的时候，会把他接收到的事件传给自己的父级，一直到`window`，当然其传播的是事件，绑定的执行函数并不会传播，如果父级没有绑定事件函数，就算传递了事件，也不会有什么表现，但事件确实传递了。 事件冒泡的原因是事件源本身可能没有处理事件的能力，即处理事件的函数并未绑定在该事件源上。它本身并不能处理事件，所以需要将事件传播出去，从而能达到处理该事件的执行函数。 ## 实例 当点击`id`为`i3`的`
`时，浏览器会依次弹出`3 2 1`，这就是事件冒泡，此正方形处于叶节点上，对其操作的事件会向上进行冒泡，直到根节点。 ```html JS事件冒泡及阻止
``` ## 应用场景 例如我们有`10`个`
  • `标签，每个标签有一个`uid`作为判断用户点击的区别，使用冒泡就不需要为每个`
  • `绑定点击事件，可以称为事件委托。 ```html JS事件冒泡及阻止 ``` ## 阻止冒泡 有时候我们并不希望事件冒泡而去执行上级节点绑定的事件，这时候就需要阻止事件的冒泡，`w3c`的方法是`e.stopPropagation()`，`IE`则是使用` window.event.cancelBubble = true;`。 ## 注意 * 不是所有的事件都能冒泡。以下事件不冒泡：`blur`、`focus`、`load`、`unload`。 * 事件解决方案方式在不同浏览器，可能是有所区别的，有些不支持捕获型方案，多数浏览器默认冒泡型方案。 * 阻止冒泡并不能阻止对象默认行为，例如`submit`按钮被点击后会提交表单数据，需使用`e.preventDefault();`阻止默认行为，`IE`则是`window.event.returnValue = false;`。 ## 每日一题 ``` https://github.com/WindrunnerMax/EveryDay ```