js事件冒泡和捕获
作者：小小小无路 发布于：2016-2-28 17:09 Sunday
之前面试别人的时候总喜欢问事件相关的问题。。。不过很少问如何取消事件冒泡。。因为大家都知道event.stopPropagation()就可以了。。。
我也一直以为这货只能取消事件冒泡。。我还一直以为事件捕获不能取消。。额后来看了<webkit技术内幕>幡然醒悟。。。唉之前看书不仔细啊。。
一个事件会从document一直捕获传递到目标节点。。中间如果触发监听捕获的事件并且调用event.stopPropagation()；则此事件不会再继续向目标节点传递。
这个事件到达目标节点之后，默认是不冒泡的。。只有event.bubbles为true的时候才会触发冒泡。
下面这个表格是我让实习生整理的哪些事件冒泡的list。。。仅作为参考。。。
| 事件 | 何时触发 | 能否 捕捉 |
能否冒泡 event.bubbles |
冒泡到哪里 event.eventPhase |
备注 | |
| UI事件 new4 |
load | 页面内容完成时在window上触发此事件 当图像加载完毕时在<img>元素上触发 当嵌入的内容加载完毕时在<object>元素上面触发 |
能 | 否 | 无法冒泡，捕捉和冒泡都是在window上触发， event.eventPhase = 2 |
|
| unload | 当前页面完全卸载后在window上面触发 当嵌入的内容卸载完毕后在<object>元素上触发 |
能 | 否 | |||
| error | 当发生JavaScript错误时在window上面触发 当无法加载图像时在<img>元素上面触发 |
能 | firefox：window能 img否/ 否chrome |
window->window | ||
| resize | 当浏览器窗口被调整到一个新的高度或宽度时 在window对象上触发 |
能 | 能firefox/ 否chrome |
window->window | ||
| scroll | 浏览器的滚动条位置发生变化时触发此事件 | 能 | 能 | document—>window | scrollTop属性 | |
| 焦点事件/表单事件 new 16 new 4 |
focus | 当元素获得焦点时触发 | 能 | 否 | ||
| blur | 当元素失去焦点时触发 | 能 | 否 | |||
| focusin | 当元素获得焦点时触发 | 能 | 能 | window | chrome IE可以 Firefox不可以 | |
| focusout | 当元素失去焦点时触发 | 能 | 能 | window | chrome IE可以 Firefox不可以 | |
| select | 当选中文本框中文本时触发 | 能 | 能 | window | ||
| change | 当前元素失去焦点并且元素的内容发生改变时触发 | 能 | 能 | window | 失去焦点后触发 | |
| reset | 当表单中的reset的属性被激发时触发 | 能 | 能 | window | form.reset() | |
| submit | 一个表单被提交时触发 | 能 | 能 | window | 绑定表单，绑定按钮无效 | |
| 鼠标事件 new 17 new 10 |
click | 单击主鼠标按钮时触发 | 能 | 能 | window | |
| dblclick | 双击主鼠标按钮时出触发 | 能 | 能 | window | ||
| mousedown | 在用户按下了任意鼠标按钮时触发 | 能 | 能 | window | ||
| mouseup | 在用户释放鼠标按钮时触发 | 能 | 能 | window | ||
| mouseenter | 在鼠标光标从元素外部首次移动到元素范围之内时触发 | 能 | 否 | chrome：光标移动到后代元素不会触发 firefox:除了不冒泡和mouseover一样 |
||
| mouseleave | 在位于元素上方的鼠标光标移动到元素范围之外时触发 | 能 | 否 | chrome：光标移动到后代元素不会触发 firefox:除了不冒泡和mouseover一样 |
||
| mousemove | 当鼠标指针在元素内部移动时重复触发 | 能 | 能 | window | ||
| mouseout | 在鼠标指针位于一个元素的上方，然后用户将其移入 另一个元素时触发 |
能 | 能 | window | 又移入的另一个元素可能位于前一个元素的外部， 也可能是这个元素的子元素。 |
|
| mouseover | 在鼠标指针位于一个元素的外部，然后用户将其首次 移入另一个元素边界之内时触发 |
能 | 能 | window | 又移入的另一个元素可能位于前一个元素的外部， 也可能是这个元素的子元素。 |
|
| mousewheel | 用户通过鼠标滚轮滚动页面时触发chrome | 能 | 能 | body—>window | chrome：wheelDelta属性 向上滚+120 向下滚-120 通过wheelDelta正负判读鼠标滚轮滚动方向 |
|
| DOMMouseScroll | 用户通过鼠标滚轮滚动页面时触发firefox | 能 | 能 | body—>window | firefox:detail属性 向上滚+3 向下滚-3 | |
| 键盘事件 new 5 new 7 |
keydown | 当用户按下键盘的任意键时触发，如果按住不放的话，会重复触发此事件 | 能 | 能 | window | 显示键盘上任意按键的keyCode值 |
| keypress | 当用户按下键盘的字符键时触发，而且如果按住不放的话，会重复触发此事件 | 能 | 能 | window | 显示键盘上字符键的ASCII值，包括回车键 是否按下shift ctrl键 new7 |
|
| keyup | 当用户释放键盘上的键时触发 | 能 | 能 | window | 显示键盘上任意按键的keyCode值 | |
| 拖拽事件 new 6 |
drag | 当某个对象被拖动时触发此事件 | 能 | 能 | window | 绑定被拖拽元素 |
| dragstart | 当某对象开始被拖动时触发此事件 | 能 | 能 | window | 绑定被拖拽元素 | |
| dragenter | 当被鼠标拖动的对象进入其容器范围内时触发此事件 | 能 | 能 | window | 绑定容器元素 | |
| dragleave | 当被鼠标拖动的对象离开其容器范围内时，或在容器范 围内释放鼠标按钮时触发此事件 |
能 | 能 | window | 绑定容器元素 | |
| dragend | 当鼠标拖动结束时触发此事件，即鼠标的按钮被释放 | 能 | 能 | window | 绑定被拖拽元素 | |
| dragover | 当被拖动的对象在另一对象容器范围内拖动时触发此事件 | 能 | 能 | window | 绑定容器元素 | |
| 文本事件 new 6 |
copy | 当页面当前的被选择内容被复制后触发此事件 | 能 | 能 | window | |
| cut | 当页面当前的被选择内容被剪切时触发此事件 | 能 | 能 | window | ||
| paste | 当内容被粘贴时触发此事件 | 能 | 能 | window | ||
| 触摸事件 new 11 |
touchstart | 当手指触摸屏幕时触发 | 能 | 能 | window | 单击触发一次touchstart和一次touchend |
| touchmove | 当手指在屏幕上滑动时连续地触发，在这个事件发生期间，调用preventDefault()可以阻止滚动 | 能 | 能 | window | ||
| touchend | 当手指从屏幕上移开时触发 | 能 | 能 | window | ||
| touchcancel | 当系统停止跟踪触摸时触发 | 能 | 能 | window | ||
| HTML5事件 new 4 |
contextmenu (new 6) |
当浏览者按下鼠标右键出现菜单时触发 | 能 | 能 | window | event.preventDefault()阻止显示浏览器默认的上下文 菜单 |
| beforeunload | 在页面卸载前触发，可以通过它来取消卸载并继续使用 原有界面 |
能 | 否 | 必须将event.returnValue的值设置为要显示给用户的 字符串（对IE和Firefox而言），同时作为函数的值返 回（对Safari和Chrome而言） |
||
| DOMContentloaded | 在形成完整的DOM树之后就会触发 | 能 | 能 | document—>window | 在图像、JavaScript文件、CSS文件或其他资源下载前触发 | |
| 变动事件 new 15 |
DOMSubtreeModified | 在DOM结构中发生任何变化时触发，这个事件在其他任何 事件触发后都会触发 |
能 | 能 | body—>window | |
| DOMNodeInserted | 在一个节点作为子节点被插入到另一个节点时触发 appendChild()、replaceChild()或insertBefore()向DOM 中插入节点时首先触发 |
能 | 能 | window | ||
| DOMNodeRemoved | 在节点从其父节点中被移除时触发 removeChild()或replaceChild()从DOM中删除节点时首先触发 |
能 | 能 | window | ||