js 事件模型

事件模型

JavaScript事件使得网页具备互动和交互性，我们应该对其深入了解以便开发工作，在各式各样的浏览器中，JavaScript事件模型主要分为3种：原始事件模型、DOM2事件模型、IE事件模型。

观察者模式又叫做发布订阅者模式(Publish/Subscribe)，它可以让多个观察者对象同时监听某一个主题对象，这个主题对象的状态变化时会通知所有的订阅者，使得它们能够做出反应。
JS的事件模型就是一种观察者模式的体现，当对应的事件被触发时，监听该事件的所有监听函数都会被调用。

---

原始事件模型（DOM0级）

又称为原始事件模型，在该模型中，事件不会传播，即没有事件流的概念。

事件绑定监听函数比较简单, 有两种方式：

1.HTML代码中直接绑定

<input type="button" onclick="fun()">

2.通过JS代码指定属性值

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

移除监听函数

btn.onclick = null;

这种方式所有浏览器都兼容，但是逻辑与显示并没有分离。

---

DOM2事件模型

属于W3C标准模型，现代浏览器(除IE6-8之外的浏览器)都支持该模型。

在该事件模型中，一次事件共有三个过程:

1、事件捕获阶段(capturing phase)。事件从document一直向下传播到目标元素, 依次检查经过的节点是否绑定了事件监听函数，如果有则执行。

2、事件处理阶段(target phase)。事件到达目标元素, 触发目标元素的监听函数。

3、事件冒泡阶段(bubbling phase)。事件从目标元素冒泡到document, 依次检查经过的节点是否绑定了事件监听函数，如果有则执行。

---

IE事件模型

IE事件模型共有两个过程:

1、事件处理阶段(target phase)，事件到达目标元素，触发目标元素的监听函数。

2、事件冒泡阶段(bubbling phase)，事件从目标元素冒泡到document，依次检查经过的节点是否绑定了事件监听函数，如果有则执行。