[JavaScript] 事件

1. 事件流

1.1 javascript事件

javascript与HTML之间的交互是通过事件实现的。事件就是文档或浏览器窗口中发生的一些特定的交互瞬间。可以使用侦听器来处理事件，以便事件发生时执行相应的代码。

事件流描述的是从页面中接收事件的顺序，IE的事件流是冒泡流，而Netscape Communicator的事件流是事件捕获流。

1.2 事件冒泡

IE的事件流叫做事件冒泡，即事件开始时由最具体的元素接收，然后逐级向上传播到较为不具体的节点，例如：

  
    
  
  
    Click

  

如果单击了页面中的

元素，那么这个click事件会按照

、、、document的顺序传播。所有现代浏览器都支持事件冒泡。

1.3 事件捕获

事件捕获的思想是不太具体的节点应该更早接收到事件，而最具体的节点应该最后接收到。如1.2中的例子，click事件的触发顺序是document、、、

。除Netscape Communicator外，Safari、Chrome、Opera和Firefox也都支持事件流模型。尽管DOM2规范要求事件应从document对象开始传播，但这四种浏览器都是从window对象开始捕获事件的。

1.4 DOM事件流

DOM2规定的事件流包括三个阶段：事件捕获阶段、处于目标阶段和事件冒泡阶段。在DOM事件流中，实际的目标(div)在捕获阶段不会接收到事件，接着事件在div上发生，并在事件处理中被看成冒泡阶段的一部分。但实际上Safari、Chrome、Firefox和Opera9.5级更高版本都会在捕获阳段触发事件对象上的事件。

2. 事件处理程序

2.1 HTML事件处理程序

事件就是用户或浏览器自身执行的某种动作，如click、load和mouseover，都是事件的名字，而响应某个事件的函数就叫做事件处理程序（或事件侦听器）。事件处理程序以on开头，如onclick。

某个元素支持的每种事件，都可以使用一个相应事件处理程序同名的HTML特性指定，例如：

也可以调用在页面其他地方定义的脚本，例如：

  function show() {
    alert("Clicked");
  }

2.2 DOM0级事件处理程序

通过Javascript指定事件处理程序的传统方式，就是将一个函数赋值给一个事件处理程序属性，例如：

var mydiv = document.getElementById("mydiv");
mydiv.onclick = function() {
  alert("Clicked");
}

使用DOM0级方法指定的事件处理程序被认为是元素的方法。因此这时候的事件处理程序是在元素的作用域中运行，例如：

var mydiv = document.getElementById("mydiv"); 
mydiv.onclick = function() { 
  alert(this.id); 
}

也可以删除通过DOM0级方法指定的事件处理程序，例如：

var mydiv = document.getElementById("mydiv"); 
mydiv.onclick = null;

2.3 DOM2级事件处理程序

DOM2级事件定义了两个方法，用于处理指定和删除事件处理程序的操作：addEventListener()和removeEventListener()。所有DOM节点都包含这两个方法，并且接受3个参数：要处理的事件名，作为事件处理程序的函数和一个布尔值，布尔值参数如果是true，表示在捕获阶段调用事件处理程序，如果是false，表示在冒泡阶段调用事件处理程序，例如：

var mydiv = document.getElementById("mydiv");  
mydiv.addEventListener("click", function() {
  alert(this.id); 
}, false);

可以添加多个事件处理程序，会按照添加它们的顺序触发。通过addEventListener()添加removeEventListener()来移除，这也意味着通过addEventListener()添加的匿名函数将无法移除，例如：

var mydiv = document.getElementById("mydiv");   
mydiv.removeEventListener("click", function() { 
  alert(this.id);  
}, false); //无效

可以重写为：

var mydiv = document.getElementById("mydiv");  
var handler = function() {  
  alert(this.id);   
};  
mydiv.addEventListener("click", handler, false);
mydiv.removeEventListener("click", handler, false); //有效

2.4 IE事件处理程序

IE实现了与DOM中类拟的两个方法：attachEvent()和detachEvent()。这两个方法接受相同的两个参数：事件处理程序名称与事件处理程序函数，IE只支持事件冒泡，例如：

var mydiv = document.getElementById("mydiv");   
mydiv.attachEvent(" function() {   
  alert(this.id);    
});

在IE中使用attachEvent()事件处理程序会在全局作用域中运行，因此this等于window。类似的，attachEvent()，方法也可以用来为一个元素添加多个事件处理程序，只是以相反的顺序被触发。

使用detachEvent()可以移除attachEvent()添加的事件处理程序，条件是提供相同的参数。同样的，匿名函数将不能被移除，可以使用如下代码：

var mydiv = document.getElementById("mydiv");   
var handler = function() {   
  alert(this.id);    
};   
mydiv.attachEvent("click", handler); 
mydiv.detachEvent("click", handler);

3. 事件对象

3.1 UI事件

UI事件主要与元素的焦点相关，而且仅在兼容DOM的浏览器中受到了支持。有3个UI事件为：

1) DOMActive: 表示元素已经被用户操作激活。

2) DOMFocusIn: 表示元素已经获得了焦点，这是HTML中focus事件的普通版。

3) DOMFocusOut: 表示元素已经失去了焦点，这是HTML中blur事件的普通版。

支持这几个UI事件的浏览器已经很少，因此不推荐使用。

3.2 鼠标事件

鼠标事件是WEB上面最常用的一类事件，DOM中定义了7个鼠标事件：

1) click: 在用户单击主鼠标按钮或者按下回车键时触发。

2) dblclick: 在用户双击主鼠标按钮时触发。

3) mousedown: 在用户按下任意鼠标按钮时触发。

4) mouseout: 在鼠标指针位于一个元素上方，而后用户将其移入另一个元素时触发。

5) mouseover: 在鼠标指针位于一个元素外部，而后用户将其移入另一个元素内时触发。

6) mouseup: 在用户释放鼠标按钮时触发。

7) mousemove: 当鼠标指针在元素内部移时重复地触发。

页面上所有元素都支持鼠标事件，所有鼠标事件都会冒泡，也可以被取消，而取消鼠标事件将会影响浏览器的默认行为。

虽然鼠标事件主要使用鼠标来触发，但在按下鼠标时键盘上的某些键的状态也可以影响到所要采取的操作。这些修改键就是Shift、Ctrl、Alt和Meta，它们经常被用来修改鼠标事件的行为。DOM为此规定了4个属性，表示这些修改键的状态：shiftKey、ctrlKey、altKey和metaKey。如果相应的键被按下了，则值为true，否则值为false。

只有在主鼠标按钮被单击时才会触发click事件，但是对于mousedown和mouseup事件，其event对象存在一个button属性，表示按下或释放的按钮：0表示主鼠标按钮，1表示中间滚轮按钮，2表示次鼠标按钮。

IE中的button属性与DOM的button属性有很大差异：

1) 0: 表示没有按下按钮。

2) 1: 表示按下了主鼠标按钮。

3) 2: 表示按下了次鼠标按钮。

4) 3: 表示同时按下了主、次鼠标按钮。

5) 4: 表示按下了中间鼠标按钮。

6) 5: 表示同时按下了主鼠标按钮和中间的鼠标按钮。

7) 6: 表示同时按下了次鼠标按钮和中间的鼠标按钮。

8) 7: 表示同时按下了三个鼠标按钮。

支持DOM版鼠标事件的浏览器可通过hasFearture()方法来检测。

3.3 键盘事件

有3个键盘事件如下：

1) keydown: 当用户按下键盘上的任意键时触发，如果按住不放会重复触发此事件。

2) keypress: 当用户按下键盘上的字符键时触发，如果按住不放会重复触发此事件。

3) keyup: 当用户释放键盘上的键时触发。

在发生keydown和keyup事件时，event对象的keyCode属性中会包含一个代码，与键盘上的特定的键对应，对数字字母字符键，keyCode属性与ASCII码中对应小写字母或数字的编码相同。

以下是keydown或keyup事件存在的特殊情况：

1) 在Firefox和Opera中，按分号键时keyCode值为59，但IE和Safari返回186。

2) 在Safari 3之前的版本中，上、下、左、右箭头和上、下翻页键返回大于63000的值。

3) 在Opera 9.5之前的版本中，会将非数字字母键的keyCode设置为等于相应字符的ASCII编码。

4) 在Safari 3之前的版本中，不会因为按下了制表、上档、控制或替代键而触发keydown和keyup事件。

Firefox、Chrome和Safari的event对象都支持一个charCode属性，这个属性只有在发生keypress事件时才包含值，而且这个值是按下的那个键所代表字符的ASCII编码。IE和Opera则是在keyCode中保存字符的ASCII编码。

3.4 HTML事件

HTML事件包括下列几个事件：

1) load: 当页面完全加载后window上面触发，当所有框架都加载完毕时在框架集上面触发，当图像加载完毕时在元素上触发，当嵌入的内容加载完毕时在