20、HTML事件（一）

事件

DOM同时支持两种事件模式：捕获型事件和冒泡型事件，但是，捕获型事件先发生。两种事件流会触及DOM中的所有对象，从document对象开始，也在document对象结束（大部分兼容标准的浏览会继续将事件捕获/冒泡延续至window对象），DOM中的元素都会连续收到两次事件，一次在捕获过程中，另一次在冒泡过程中。DOM事件模型最独特的性质是，文本节点也触发事件（在IE中不会）。点击文本节点事件流应该如下图：


 
传统事件处理函数有两种分配方式：在JavaScript中或者在HTML中。

在JavaScript中分配事件处理函数：

var oDiv = document.getElementById("div1");
oDiv.onclick = function () {
	alert("I was clicked");
};

 
注：在这个分配方法，事件处理函数名称必须小写，才能正确响应事件。
在HTML中分配事件处理函数：

<div onclick='alert("I was clicked")'> </div> 

 
说明：用这种方法，事件处理函数的大小写可任意，所以onclick等同于onClick、OnClick或ONCLICK，但标准的事件处理函数应该全部用小写定义。
说明：传统分配方式有个缺陷就是只能分配一个处理函数。于是就出现了其它以下分配方式。

 

IE中特有的attachEvent()事件处理函数分配方式：

var fnClick1 = function () {
	alert("Clicked!");
};
var fnClick2 = function () {
	alert("Also clicked!");
};
var oDiv = document.getElementById("div");
oDiv.attachEvent("onclick", fnClick1);//绑定事件处理函数 
oDiv.attachEvent("onclick", fnClick2); 
//do something ... 
oDiv.detachEvent("onclick", fnClick1);//解除事件处理函数 
oDiv.detachEvent("onclick", fnClick2);

 
说明：事件处理函数总是按照添加它们的顺序进行调用。

 

DOM中的事件处理函数绑定
DOM中方法addEventListener()和removeEventListener()用来分配与移除事件处理函数。与IE不同，需三个参数：事件名、要分配的处理函数、处理函数是用于冒泡阶段还是捕获阶段，如果是捕获阶段，第三个参数为true。

var fnClick1 = function () {
	alert("Clicked!");
};
var oDiv = document.getElementById("div");
oDiv.addEventListener("onclick", fnClick1, false);//绑定事件处理函数
//do something ... 
oDiv.removeEventListener("onclick", fnClick1, false);//解除事件处理函数 

 说明：也可绑定多个函数，但要注意的是第三个参数删除时要与添加时一样才能真真删除掉函数，否则删除不掉，也不会报错。
传统方式oDiv.onclick = fnClick;与oDiv.addEventListener('onclick',fnClick1,false);等价。  

事件对象的属性与方法

鼠标 / 键盘属性

 

属性	描述	IE	F	O	W3C
altKey	返回当事件被触发时，"ALT" 是否被按下。	6	1	9	Yes
button	返回当事件被触发时，哪个鼠标按钮被点击。	6	1	9	Yes
clientX	鼠标指针相对于当前窗口的水平坐标。	6	1	9	Yes
clientY	鼠标指针相对于当前窗口的垂直坐标。	6	1	9	Yes
ctrlKey	返回当事件被触发时，"CTRL" 键是否被按下。	6	1	9	Yes
metaKey	返回当事件被触发时，"meta" 键是否被按下。	No	1	9	Yes
relatedTarget	对于 mouseover 事件来说，该属性是鼠标指针移到目标节点上时所离开的那个节点。对于 mouseout 事件来说，该属性是离开目标时，鼠标指针进入的节点。	No	1	9	Yes
screenX	事件发生时鼠标指针相对于屏幕的水平坐标。	6	1	9	Yes
screenY	鼠标指针相对于屏幕的垂直坐标。	6	1	9	Yes
shiftKey	返回当事件被触发时，"SHIFT" 键是否被按下。	6	1	9	Yes

IE 属性

除了上面的鼠标/事件属性，IE 浏览器还支持下面的属性：

 

属性	描述
cancelBubble	如果事件句柄想阻止事件传播到包容对象，必须把该属性设为 true。
fromElement	对于 mouseover 和 mouseout 事件，fromElement 引用移出鼠标的元素。
keyCode	对于 keypress 事件，该属性声明了被敲击的键生成的 Unicode 字符编码。对于 keydown 和 keyup 事件，它指定了被敲击的键的虚拟键盘代码。虚拟键盘码可能和使用的键盘的布局相关。
offsetX,offsetY	发生事件的地点在事件源元素的坐标系统中的 x 坐标和 y 坐标。
returnValue	如果设置了该属性，它的值比事件句柄的返回值优先级高。把这个属性设置为 fasle，可以取消发生事件的源元素的默认动作。
srcElement	对于生成事件的 Window 对象、Document 对象或 Element 对象的引用。
toElement	对于 mouseover 和 mouseout 事件，该属性引用移入鼠标的元素。
x,y	事件发生的位置的 x 坐标和 y 坐标，它们相对于用CSS动态定位的最内层包容元素。

 

 

标准 Event 属性

下面列出了 2 级 DOM 事件标准定义的属性。

 

属性	描述	IE	F	O	W3C
bubbles	如果事件是起泡类型，则返回 true，否则返回 fasle。	No	1	9	Yes
cancelable	如果用 preventDefault() 方法可以取消与事件关联的默认动作，则为 true，否则为 fasle。	No	1	9	Yes
currentTarget	返回其监听器触发事件的节点，即当前处理该事件的元素、文档或窗口。在捕获和起泡阶段，该属性是非常有用的，因为在这两个节点，它不同于 target 属性。	No	1	9	Yes
eventPhase	回事件传播的当前阶段。它的值是1、2、3三个常量之一，它们分别表示捕获阶段、正常事件派发和起泡阶段。				Yes
target	返回事件的目标节点（触发该事件的节点），如生成事件的元素、文档或窗口。	No	1	9	Yes
timeStamp	返回事件生成的日期和时间。	No	1	9	Yes
type	返回发生的事件的类型，即当前 Event 对象表示的事件的名称。 它与注册的事件句柄同名，或者是事件句柄属性删除前缀 "on" 比如 "submit"、"load" 或 "click"。	6	1	9	Yes

 

标准 Event 方法

下面列出了 2 级 DOM 事件标准定义的方法。IE 的事件模型不支持这些方法：

 

方法	描述	IE	F	O	W3C
initEvent()	初始化新创建的 Event 对象的属性。	No	1	9	Yes
preventDefault()	通知浏览器不要执行与事件关联的默认动作。	No	1	9	Yes
stopPropagation()	终止事件在传播过程的捕获、目标处理或起泡阶段进一步传播。调用该方法后，该节点上处理该事件的处理程序将被调用，事件不再被分派到其他节点。	No	1	9	Yes