浏览器事件模型

关于事件

事件(Event)是JavaScript应用跳动的心脏 ，也是把所有东西粘在一起的胶水。当我们与浏览器中 Web 页面进行某些类型的交互时，事件就发生了。

• 事件可能是用户在某些内容上的点击、鼠标经过某个特定元素或按下键盘上的某些按键。
• 事件还可能是 Web 浏览器中发生的事情，比如说某个 Web 页面加载完成，或者是用户滚动窗口或改变窗口大小。

事件订阅

浏览器的交互是通过浏览器的内置事件响应实现的，常见的浏览器事件有文档载入（load），元素点击（click）等，订阅浏览器事件可以通过如下方式实现。

• HTML属性的事件句柄，如：onclick
• DOM属性的事件句柄，在js中为dom添加onclick方法
• 事件句柄注册：IE8+（window的两个方法addEventListener和removeEventListener）和IE8及以下（attachEvent与detachEvent）

事件传播

捕获阶段

从上到下，从外到内捕获事件。
addEventListener(type, listen, useCapture)的最后一个参数指示了在哪个阶段调用事件回调。如果是true，那么在type事件的捕获阶段将会调用listen方法，如果是false，那么就在冒泡阶段触发。

目标阶段

冒泡阶段

和捕获事件相反的顺序来冒泡到window。

阻止事件传播

通过执行e.propagation()来阻止事件的传播，包括捕获阶段和冒泡阶段的事件传播。

阻止事件默认行为

通过执行e.preventDefault()来阻止事件的默认。