javascript事件参考手册---术语、通用属性篇

Javascript和HTML之间的交互是通过用户和浏览器操作页面时引发的事件（event）来处理的。在一个设计良好的Javascript应用程序中，它包含有数据源和表现层。要让这两个方面协调一致，我们必须监听用户的交互并因此来更新页面。DOM和Javascript事件的结合正是现代WEB应用程序的基础。

以下我们将对相关事件的常用术语以及所有通用事件对象和交互做一些介绍和归纳。

一、术语

1.异步

异步事件使用通用的回调函数结构，跟线程程序结构形成鲜明对比。这意味着一块独立的代码（回调函数）注册倒一个事件处理函数之上。一旦事件发生，回调函数就会执行。

2.附加/绑定/注册回调函数

附加（绑定）事件到事件处理函数上是指代码如何注册到一个异步事件模型上。一旦事件发生就调用事件处理函数，它是一个包含已注册回调函数的引用。回调函数是一段函数引用形式的代码，它在事件完成后即可调用。

3.冒泡

事件冒泡阶段在事件捕获阶段之后发生。冒泡阶段开始于事件的源头（比如用户点击的链接）并一直上升到文档DOM树的根上。

4.捕获

事件捕获阶段（只会在W3C事件模型中发生）是首先发生的事件阶段，它包含DOM树中一个移动到事件初始化元素的位置上的事件。

5.默认行为

默认行为是基于浏览器的行为，无论用户是否绑定事件处理函数都会发生。一个浏览器默认行为的典型例子就是用户点击链接，会把你引向另一个页面。

6.事件

事件是页面发生的行为。一般来说，事件由用户发起（比如移动鼠标、敲击键盘等），但也可以由非交互的行为触发（比如页面加载、或错误的发生等）。

7.事件处理函数

事件处理函数（比如函数引用）是事件发生时的代码调用。如果没有回调函数注册到事件处理函数上，不会发生任何事情（除了默认行为）。

二、事件对象

事件对象是事件处理函数提供的，或者存在于它自身内的对象。IE与其他浏览器的处理方式有所不同。

IE的事件对象总是存在于window.event中，尽管它是window对象的属性，event对象还是只能在事件发生时访问，所有的事件处理函数执行完毕后，事件对象就被销毁。DOM标准则认为，event对象必须作为唯一的参数传给事件处理函数。

2.1 通用属性

在被捕获时事件对象会存在一系列的属性。所有这些事件对象属性直接关联事件本身而非事件类型特有。

a. 类型（type）

这个属性包含当前触发的事件名称（比如click、mouseover等）。这用以提供一个事件处理函数，以确定执行相关函数（比如绑定/移除事件）。

如下代码展示了一个使用该属性来创建一个具有不同效果的处理函数，不同的效果取决于事件的类型。该例子使用type属性为元素提供类似于hover的效果。

1//定位我们需要hover的DIV

2var div = document.getElementsByTagName('div')[0];

3//同时为mouseover和mouseout绑定一个函数

4

c. 停止冒泡（stopPropagation()/cancelBubble）

stopPropagation()方法能阻止事件冒泡（或者捕获）的进行，使得当前元素成为接收特定事件的最后一个。cancelBubble属性用于IE中，设置值为true时等同于兼容W3C的浏览器使用stopPropagation()方法。

如下代码展示了通过停止事件冒泡来动态高亮文档内的所有Li元素:

1//查找文档内的所有<li>元素

2var li = document.getElementsByTagName('li');

3var all = document.getElementsByTagName("*");

2for(var i=0; i<all.length;i++){

3function stopDefault(e){

//阻止默认浏览器行为（W3C）

if(e && e.preventDefault)

e.preventDefault();

//IE中阻止浏览器行为

else

window.event.returnValue = false;

return false;

};

以上便是Javascript事件对象通用属性的部分摘要，通过对这些基础性概念的归纳将对我们编写兼容W3C标准和IE模式的事件处理程序打下良好基础。下一篇将对javascript事件对象的鼠标属性做相关概述。