JavaScriptDOM(四)

一、事件：用户进行的某种操作

二、事件源：触发事件的对象

三、事件处理程序(函数)：当事件被触发后所执行的操作(代码)

四、注册事件

在JavaScript中，注册事件（绑定事件）有两种方式，即传统方式注册事件和事件监听方式注册事件。

1、传统方式

元素对象.事件 = 事件的处理程序;
// 示例
oBtn.onclick = function () {  }

注意：该方式注册事件的特点在于注册事件的唯一性，即同一个元素同一个事件只能设置一个处理函数，最后注册的处理函数将会覆盖前面注册的处理函数。

2、事件监听方式

由于不同浏览器采用的事件流实现方式不同，事件监听的实现存在兼容性问题。通常根据浏览器的内核，可以把浏览器划分为两大类，一类是早期版本的IE浏览器（如IE 6~IE 8），一类是遵循W3C标准的浏览器（以下简称标准浏览器）。

注意：该方式注册事件的特点在于可以给同一个DOM对象的同一个事件添加多个事件处理程序。

早期IE内核的浏览器，事件监听方式如下：

 标准浏览器，包括IE8版本以上的IE浏览器，以及新版的Firefox、Chrome等浏览器，事件监听方式如下：

 

type: 表示事件类型(若click、change、mouseover等)

callback：事件处理程序(函数)

capture：可选参数,默认值为false,表示在事件冒泡阶段进行处理true,表示在事件捕获阶段处理

五、删除事件

事件监听的移除也需要考虑兼容性问题，示例代码如下。

DOM对象.onclick = null;                     // 传统方式删除事件
DOM对象.detachEvent(type, callback);	     // 早期版本IE浏览器
DOM对象.removeEventListener(type, callback);  // 标准浏览器

六、DOM的事件流

事件流是指当事件发生时，会在发生事件的元素节点与DOM树根节点之间按照特定的顺序进行传播，这个过程称之为事件流。 网景（Netscape）公司团队的事件流采用事件捕获方式，而微软（Microsoft）公司的事件流采用事件冒泡方式，W3C对网景公司和微软公司提出的方案进行了中和处理，规定了事件发生后，首先实现事件捕获，但不会对事件进行处理；然后进行到目标阶段，执行当前元素对象的事件处理程序，但它会被看成是冒泡阶段的一部分；最后实现事件的冒泡，逐级对事件进行处理。

W3C规定的事件流的具体过程对比如下图所示：