【前端学习】前端学习第十五天：JavaScript中的事件模型

在各种浏览器中存在三种事件模型：原始事件模型、DOM事件模型和IE事件模型；

一、原始事件模型：

原始事件模型被所有浏览器支持；

在原始事件模型中。事件一旦发生就直接调用事件处理函数，事件不会向别的对象传播，原始事件模型中事件程序的注册可以采用以下几种方式；

1、在HTML中设置事件属性

<input type="button" value="确定" οnclick="alert('hello');">

2、在JavaScript中设置事件属性

格式：obj.eventType=handler;

eventType是事件类型名，handler是函数名称；

3、使用代码触发事件

可以使用代码显式的触发事件，从而调用对应的事件处理程序；

二、DOM事件模型

DOM事件流：当一个HTML元素产生一个事件时，该事件会在元素节点与根节点之间按特定的顺序传播，路径所经过的节点都会受到该事件，这个传播过程就是DOM事件流。

事件流按传播顺序分为两种类型，即事件捕捉和事件冒泡。

事件捕捉：事件从最不特定的document对象开始触发，传递到特定的事件目标，也就是从DOM树的最顶层元素一直传输到特定的元素。

事件冒泡：事件冒泡和事件捕捉的传播顺序刚好相反，简单理解就是从特定元素向上传输直到最顶层。

所有的事件都会经历事件捕捉，但不是所有的元素都会经历事件冒泡；

DOM事件模型中事件处理程序的注册采用格式：

addEventListener("e",handler,true|false);

事件程序的删除采用格式：

removeEventListener("e",handler,true|false);

其中true为捕获阶段，false为冒泡阶段；

三、IE事件模型

IE浏览器中的事件流仅包含冒泡阶段；

IE事件模型中事件处理程序的注册采用格式：

attachEvent("e","handler");

IE事件模型中事件处理程序的删除采用格式：

detachEvent("e","handler");