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绑定一个函数
 4div.onmouseover = div.onmouseout = function(e){
 5  //标准化事件对象
 6  e = e || window.event;
 7  //切换div的背景颜色，取决于所发生的鼠标事件类型
 8  this.style.background = (e.type=='mouseover')?'#eee':'#fff';
 9};

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

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

 1//查找文档内的所有<li>元素
 2var li = document.getElementsByTagName('li');
 3for(var i=0;i< li.length; i++){
 4  //监听用户是否移动鼠标到<li>上
 5  li[i].onmouseover = function(e){
 6    //如果是兼容W3C的浏览器
 7    if(e)
 8      //使用stopPropagation来停止事件冒泡
 9      e.stopPropagation();
      //否则，处理IE
    else
      //因此设置cancelBubble属性为true 来停止事件冒泡
      e.cancelBubble = true;
    //最后，高亮显示li背景
    this.style.background = "#f00";
  };
  li[i].onmouseout = function(){
    //重置背景为白色
    this.style.background = "#fff";
  };
};

阻止事件冒泡的通用函数

function stopBubble(e){
  //如果传入了事件对象，那么就是非IE浏览器
  if(e && e.stopPropagation)
    e.stopPropagation();
  else
    //否则，采用IE方式取消冒泡
    window.event.cancelBubble = true;
};

如下代码展示为当前鼠标悬停的元素添加红色边框。可以通过为每一个DOM元素增加mouseover和mouseout事件来实现。如果不阻止事件冒泡，每次把鼠标移到一个元素上时，该元素及其父级元素都会有红色边框，这并不是我们想要的结果

 1var all = document.getElementsByTagName("*");
 2for(var i=0; i<all.length;i++){
 3  //监听用户鼠标，当移动到元素上时为元素添加红色边框
 4  all[i].onmouseover = function(e){
 5    this.style.border = "1px solid #f00";
 6    stopBubble(e);
 7  };
 8  all[i].onmouseout = function(e){
 9    this.style.border = "none";
    stopBubble(e);
  };
}

d. 阻止浏览器默认行为
浏览器本身的默认行为无论在捕获阶段还是冒泡阶段都是会发生的。默认行为可以归结为没有明确指令而浏览器自动执行的行为。以下是不同事件的不同类型默认行为的例子：

• 点击 a 标签将重定向到它的URL。
• 提交HTML form将向指定的URL提交数据，并重定向浏览器到该地址上。
• 鼠标移动到一个有alt或者title属性的标签上会出现工具提示条。

在兼容W3C标准的浏览器中调用preventDefault()方法可以阻止默认行为发生；而在IE中则是设置事件对象的returnValue属性的值来阻止浏览器的默认行为。

因此我们使用自定义的stopDefault函数来兼容两种模式的浏览器。该函数带一个传入事件处理函数的事件参数，并且应用在事件处理函数的末尾，比如：return stopDefault(e)——因为处理函数同时需要返回false，而false本身也是从stopDefault返回。

function stopDefault(e){
  //阻止默认浏览器行为（W3C）
  if(e && e.preventDefault)
    e.preventDefault();
  //IE中阻止浏览器行为
  else
    window.event.returnValue = false;
  return false;
};

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