浏览器事件机制
本意是讲 react 事件机制的，但仔细想想..我连浏览器本身的事件机制也不是十分清晰
事件传播
image.png
1.其中捕获（Capture）是 事件对象(event object) 从 window 派发到 目标对象父级的过程。
2.目标（Target）阶段是 事件对象派发到目标元素时的阶段，如果事件类型指示其不冒泡，那事件传播将在此阶段终止。
3.冒泡（Bubbling）阶段 和捕获相反，是以目标对象父级到 window 的过程。
在任一阶段调用 stopPropagation 都将终止本次事件的传播。
window.addEventListener('click',function (event) {
console.log(event)
},true)
note:
addEventListener形式注册的监听事件接受参数以指定是否在捕获阶段触发本次事件，默认值为否(既冒泡阶段)。以事件处理器注册的事件在非捕获阶段触发。
点击视窗的内任一元素，输出 MouseEvent 对象。查看对象的 path 属性，既该对象的传播路径。
image.png
阻止冒泡和默认事件
-
调用
stopPropagation严格来说不是阻止冒泡，是阻止事件传播，捕获阶段也可以直接阻止。
image.png
-
事件接口还有一个
cancelBubble因历史原因的 stopPropagation 的别名，给其赋值 true 可以达到调用 stopPropagation 同样的效果。 -
或者你在事件处理器（通过
on...属性注册）的回调返回 true，这个返回值决定了事件是否被取消，这里的取消的作用要根据事件的类型而定。
element.onclick = function () { return true}
- 调用
preventDefault则是阻止默认事件。
注： jQuery 注册事件时返回 false 是一种用于同时调用 e.preventDefault 和 e.stopPropagation 的快捷方式。
事件回调
addEventListener()- on-event 事件处理器
这里主要提我自己平常没重视的地方~ 例如：
1.回调函数的this被设置为注册该事件的 DOM 元素。
2.混用时的调用顺序。
首次设定 事件处理器 为非 null 值时的顺序，就是该事件处理器的值被调用的顺序。
<button id="test" >Start Demo</button>
<script>
var button = document.getElementById('test');
button.addEventListener('click', function () { alert('ONE') }, false);
button.setAttribute('onclick', "alert('NOT CALLED')"); // event handler listener is registered here
button.addEventListener('click', function () { alert('THREE') }, false);
button.onclick = function () { alert('TWO'); };
button.addEventListener('click', function () { alert('FOUR') }, false);
</script>
//alert 顺序 one 、two 、three、 four
推荐阅读：
从Chrome源码看浏览器的事件机制
