事件模型

事件模型

事件模型分为dom0事件模型、dom2 事件模型和 IE 事件模型三种

事件流

事件发生时会在元素节点与根节点之间按照特定的顺序传播，路径所经过的所有节点都会收到该事件，这个传播过程即DOM事件流。

dom0事件模型（原始事件模型）

在该模型中，事件不会传播（没有事件流的概念），也就是事件一旦发生便会立即处理。

事件的绑定与取消

1、html代码中直接绑定

<button onclick="func()">点我</button>

2、js 代码指定属性值

var btn = document.getElementById('.btn');
btn.onclick = fun;

3、移除事件监听

btn.onclick = null;

优点

所有浏览器都兼容

缺点

• 相同事件的监听函数只能绑定一个，后面绑定的会覆盖前面的
• 没有事件冒泡、委托等

IE事件模型

IE事件模型分为两个阶段

• 事件处理阶段：事件到达目标元素，触发目标元素的监听函数
• 事件冒泡阶段：事件从目标元素冒泡到document，依次检查经过的节点是否绑定了事件监听函数，如果有，则执行

绑定事件和取消事件

// 绑定事件
attachEvent(type, handler)
//移除事件
detachEvent(type, handler)

dom2事件模型（w3c）

该事件模型分为桑阶段

• 事件捕获阶段：事件从document 一直向下传播到目标元素，一次检查经过的节点是否有事件监听函数，如果有，则触发
• 事件处理阶段：事件到达目标元素，触发目标元素的监听函数
• 事件冒泡阶段：事件从目标元素冒泡到 document ，依次检查经过的节点是否绑定事件监听函数

绑定事件和取消事件

// 绑定事件
addEventListener(type, handler, useCapture);