浏览器事件机制

本意是讲 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源码看浏览器的事件机制