监听事件系列之冒泡事件demo
事件冒泡
定义：当一个元素上的事件被触发时，其所有父元素上的同类型事件都会被触发,这一过程叫做事件冒泡。这个事件从被触发的原始元素开始一直冒泡到DOM树的最上层。
冒泡顺序为：原始元素 --> 父元素(一个或多个) --> body —> document —> window
只要父元素注册了与子元素类型相同的事件，当子元素的事件被触发时父元素的事件就会被触发。
问：事件冒泡一直存在，可为什么我们在开发的时候不易察觉呢？
答：因为没有给父元素注册同类型的监听事件，即没有设置对应的执行函数。
常用的阻止事件冒泡的方法
- e.stopPropagation()
- 阻止捕获和冒泡阶段中当前事件的进一步传播。
- 大多数浏览器支持
- event.stopImmediatePropagation()
- 如果有多个相同类型事件的事件监听函数绑定到同一个元素，当该类型的事件触发时，它们会按照被添加的顺序执行。如果其中某个监听函数执行了 event.stopImmediatePropagation() 方法，则当前元素剩下的监听函数将不会被执行。
- window.event.cancelBubble=true
- ie8及以下版本浏览器
事件监听代码示例：
示例一：
示例二：
常用的事件类型：（更多事件类型请参考MDN) https://developer.mozilla.org/zh-CN/docs/Web/Events
- click
- touchstart
- touchmove
- touchend
- submit
- keydown
- …
特殊的不会冒泡的事件：
- focus
- blur
示例
某洗车app首页的区域选择抽屉和首页列表页面重叠，触摸滑动展开的区域容器时，触摸事件冒泡到底部的商店列表导致底部的列表一起滚动
解决方法
阻止发生在抽屉容器中的触摸事件（touchstart,touchmove,touchend,touchcancel）冒泡到底部列表。