三种事件模型是什么？

1. DOM0事件模型（原始事件模型）

有两种实现方式

通过元素属性来绑定事件

点我

先获取页面元素，然后以赋值的形式来绑定事件

const btn = document.getElementById('btn') btn.onclick = function(){ //do something } //解除事件 btn.onclick = null

DOM0缺点

一个dom节点只能绑定一个事件，再次绑定将会覆盖之前的事件。

1. DOM2事件模型

dom2新增冒泡和捕获的概念，并且支持一个元素节点绑定多个事件。 2.1 事件捕获和事件冒泡（capture,bubble )

如图所示1,2,3为捕获，4,5,6,7为冒泡，也就是说事件流分为三个阶段： DOM2 级事件模型共有三个阶段：

事件捕获阶段：事件从 document 向下传播到目标元素，依次检查所有节点是否绑定了监听事件，如果有则执行。
事件处理阶段：事件在达到目标元素时，触发监听事件。
事件冒泡阶段：事件从目标元素冒泡到 document，并且一次检查各个节点是否绑定了监听函数，如果有则执行。

2.2 addEventListener

这应该是大家用的最熟悉的事件绑定方法了。 addEventListener有三个参数 事件名称、事件回调、捕获/冒泡 btn.addEventListener('click',function(){ console.log('btn') },true) box.addEventListener('click',function(){ console.log('box') },false)

设置为true，则事件在捕获阶段执行，为false则在冒泡阶段执行。 3. IE事件模型

IE事件只支持冒泡，所以事件流有两个阶段：

事件处理阶段：事件在达到目标元素时，触发监听事件。
事件冒泡阶段：事件从目标元素冒泡到 document，并且一次检查各个节点是否绑定了监听函数，如果有则执行。

实现方法： // 绑定事件 el.attachEvent(eventType, handler)

// 移除事件 el.detachEvent(eventType, handler)

事件是用户操作网页时发生的交互动作或者网页本身的一些操作，现代浏览器一共有三种事件模型。

第一种事件模型是最早的 DOM0 级模型，这种模型不会传播，所以没有事件流的概念，但是现在有的浏览器支持以冒泡的方式实 现，它可以在网页中直接定义监听函数，也可以通过 js 属性来指定监听函数。这种方式是所有浏览器都兼容的。

第二种事件模型是 IE 事件模型，在该事件模型中，一次事件共有两个过程，事件处理阶段，和事件冒泡阶段。事件处理阶段会首先执行目标元素绑定的监听事件。然后是事件冒泡阶段，冒泡指的是事件从目标元素冒泡到 document，依次检查经过的节点是否绑定了事件监听函数，如果有则执行。这种模型通过 attachEvent 来添加监听函数，可以添加多个监听函数，会按顺序依次执行。

第三种是 DOM2 级事件模型，在该事件模型中，一次事件共有三个过程，第一个过程是事件捕获阶段。捕获指的是事件从 document 一直向下传播到目标元素，依次检查经过的节点是否绑定了事件监听函数，如果有则执行。后面两个阶段和 IE 事件模型的两个阶段相同。这种事件模型，事件绑定的函数是 addEventListener，其中第三个参数可以指定事件是否在捕获阶段执行。