事件
- 事件模型：冒泡型（全兼容）和捕获型（IE不兼容）
（1）冒泡型事件：事件按照从最特定的事件目标到最不特定的事件目标的顺序逐一触发，即从DOM层次结构的最底端往上一级级升。
（2）捕获型事件：与冒泡型事件的顺序相反。
【注】不光FF，IE以前的版本在处理<html>标记级别的事件时顺序也有出入，因此无论任何情况，都应该避免在<html>标记级别上处理事件。 - 事件监听函数：
（1）IE：
[object].attachEvent(“eventName”,fnEventHandler);//添加事件
[object].detachEvent(“eventName”,fnEventHandler);//删除事件
其中，eventName代表事件名称，如：”onclick”,”onload”,”onmouseover”等等
fnEventHandler代表事件监听函数（注意：只写函数名，不带括号）
（2）标准DOM：
[object].addEventListener(“eventName”,fnEventHandler,bCapture);
[object].removeEventListener(“evenName”,fnEvenHandler,bCapture);
其中，前两个参数同（1），只不过事件名称应该相应的改为”click”,”onload”,”mouseover”，bCapture通常设为false，即冒泡事件（true为捕获事件） - 事件对象：
浏览器中的事件都是以对象的形式存在的。
IE和标准DOM浏览器（如：FF）获取对象上的差别：
IE中，事件对象是window对象的一个属性event。
访问方法：oP.onclick=function(){var oEvent=window.event;}
标准DOM浏览器中，event对象必须作为唯一的参数传给事件处理函数。
访问方法：oP.onclick=function(oEvent){}
【兼容方法】
oP.onclick=function(oEvent){ //兼容非IE
if(window.event) oEvent=window.event;//兼容IE
}
事件常用的属性和方法
|
IE |
标准DOM |
类型 |
可读/可写 |
说明 |
|
type |
type |
String |
IE中R/W，标准DOM中为R |
事件名称 |
|
ScrElement |
target |
Element |
IE中R/W，标准DOM中为R |
引起事件的元素/对象 |
|
returnValue |
-- |
Boolean |
R/W |
设置为false时可取消事件的默认行为 |
|
-- |
preventDefault() |
Function |
N/A |
可以调用该方法来阻止事件的默认行为 |
- 事件类型
（1）鼠标事件
|
事件名称 |
说明 |
|
click |
单击鼠标左键时触发 |
|
dbclick |
双击鼠标左键时触发 2）IE：mousedown→mouseup→click→mouseup→dbclick |
|
mousedown |
单击任意一个鼠标按键时触发 |
|
mouseout |
鼠标指针在某个元素上，移除该元素边界时触发 |
|
mouseover |
鼠标指针移到另一个元素上时触发 |
|
mouseup |
松开鼠标任意一个按键时触发 |
|
mousemove |
鼠标指针在某个元素上移动时持续触发 |
鼠标事件常用属性和方法
|
IE |
标准DOM |
类型 |
可读/可写 |
说明 |
|
button |
button |
Integer |
R/W |
鼠标事件，值对应按下的鼠标键 |
|
-- |
detail |
Integer |
R |
鼠标按键被单击的次数 |
|
cancelBubble |
cancelBubble |
Boolean |
IE中R/W，标准DOM中为R |
IE中设置为 true可取消事件向上冒泡，标准DOM中只读 |
|
-- |
stopPropagation() |
Function |
N/A |
可以调用该方法来阻止事件向上冒泡 |
|
clientX |
clientX |
Integer |
IE中R/W，标准DOM中为R |
鼠标指针在客户端区域的坐标，不包括工具栏、滚动条等 |
|
clientY |
clientY |
|||
|
screenX |
screenX |
Integer |
IE中R/W，标准DOM中为R |
鼠标指针相对于整个计算机屏幕的坐标值 |
|
screenY |
screenY |
|||
|
fromElement |
relatedTarget |
Element |
IE中R/W，标准DOM中为R |
鼠标指针所离开的元素 |
|
toElement |
relatedTarget |
Element |
IE中R/W，标准DOM中为R |
鼠标指针正进入的元素 |
附： button属性及不同浏览器中的键值
1）IE中：未按下按键=0，左键=1，右键=2，同时按下左、右键=3，中键（滑轮）=4
同时按下左、中键=5，同时按下右、中键=6，同时按下左、中、右键=7
2）FF中：未按下按键=undefined，左键=0，中键（滑轮）=1，右键=2
（2）键盘事件
|
事件名称 |
说明 |
|
keydown |
按下键盘上某个按键时触发，一直按住某键则会持续触发 |
|
keypress |
按下某个按键并产生字符时触发，即忽略Shift、Alt、Ctrl等功能键 |
|
keyup |
释放某个按键时触发 |
按键事件常用属性和方法
|
IE |
标准DOM |
类型 |
可读/可写 |
说明 |
|
altKey |
altKey |
Boolean |
R/W |
按下Alt键则为true，否则为false |
|
ctrlKey |
ctrlKey |
Boolean |
R/W |
按下Ctrl键则为true，否则为false |
|
shiftKey |
shiftKey |
Boolean |
R/W |
按下Shift键则为true，否则为false |
|
-- |
charCode |
Integer |
R |
按下按键的Unicode值 |
|
keyCode |
keyCode |
Integer |
R/W |
IE中keypress事件表示按下按键的Unicode值，keydown/keyup事件为按键的数字代号。标准DOM中keypress时为0，其余为按下按键的数字代号。 |
【注】keyCode和charCode属性
1）keyCode在IE和标准DOM浏览器中的keydown/keyup事件相同
2）keyCode在IE的keypress事件中等同于标准DOM浏览器中的charCode
3）兼容方法：oEvent.charCode=(oEvent.type==”keypress”)?oEvent.keyCode:0;
4）只有keypress事件的charCode能够很好地区分字母大小写
（3）HTML事件
|
事件名称 |
说明 |
|
load |
页面完全加载后在window对象上触发，图片加载完成后在其上触发 |
|
unload |
页面完全卸载后在window对象上触发，图片卸载完成后在其上触发 |
|
error |
脚本出错时在window对象上触发，图像无法载入时在其上触发 |
|
select |
选择了文本框的一个或多个字符时触发 |
|
change |
文本框失去焦点时，并且在它获取焦点后内容发生过改变时触发 |
|
submit |
单击“提交”按钮时在表单form上触发 |
|
focus |
任何元素或窗口获得焦点时触发 |
|
Blur |
任何元素或窗口失去焦点时触发 |
