JavaScript中的事件模型分为：事件和事件流、原始事件、标准事件和IE事件。
事件与事件流
JavaScript中的事件，可以理解为HTML文档或者浏览器中发生的一种交互操作，让网页有互动的功能。常见的事件就是加载事件、鼠标事件和自定义事件。
因为DOM是一个树结构，如果在子节点上绑定事件，那触发事件的时候，就会发生执行顺序的问题，这就涉及到了事件流的概念：
事件流会经历三个阶段：
- 事件捕获阶段
- 处于目标阶段
- 事件冒泡阶段
事件冒泡是一种从下往上的传播方式，由触发点开始，然后向上传播到最不具体的那个节点上，也就是DOM中的最高层父节点上。例如以下代码：
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><button id="clickMe">Click Me</button><script>var btn = document.getElementById('clickMe')btn.onclick = function(){console.log('1.btn')}document.body.onclick = function(){console.log('2.body')}document.onclick = function(){console.log('3.document')}window.onclick = function(){console.log('4.window')}</script>
</body>
</html>
点击按钮的时候，事件首先在button触发，然后向上传播。
事件捕获阶段则是从Document上开始的。
事件模型
事件模型可以分为三种：
- 原始事件模型【DOM0级】
- 标准事件模型【DOM2级】
- IE事件模型（基本上不用了）
原始事件模型【DOM0级】
事件绑定比较简单，有两种方式：
1、HTML代码中绑定：
<button onclick='funclick()'></button>
2、通过JS代码绑定：
var btn = document.getELementById('btn');
btn.onclick = function(){}
原始事件模型的特性：
- 绑定速度快，原始事件具有很好的跨浏览器优势，会以最快的速度绑定，但是由于绑定速度太快，可能页面还未完全加载出来，以至于事件可能无法正常运行。
- 只支持冒泡，不支持捕获
- 同一个类型的事件只能绑定一次
标准事件模型【DOM2级】
标准事件模型的一个事件，会有三个过程：
- 事件捕获阶段：事件从Document上一直向下传播到目标元素，依次检查经过的节点是否绑定事件监听函数，如果有那就执行；
- 事件处理阶段：事件达到目标元素，触发目标元素的监听函数
- 事件冒泡阶段：事件从目标元素冒泡到Document上，依次检查经过的节点上是否绑定事件监听函数，如果有那就执行。
事件监听函数：addEventListener(eventType, handler, useCapture)
移除监听函数：removeEventListener(eventType, handler, useCapture)
eventType：指定事件类型
handler：事件处理函数
useCapture：是一个布尔值，表示是否在事件捕获阶段执行，默认值是false，和IE浏览器保持一致。
![【Osek网络管理测试】[TG4_TC5]唤醒条件](https://img-blog.csdnimg.cn/direct/a1bb7916b134499a9b18e5ec7599bffe.png)
