JavaScript事件

[size=x-small][size=small]第九章  事件
一、事件流
1.冒泡型事件
思想：事件按照从最特定的事件目标到最不特定的事件目标的顺序触发。
eg:
IE:div->body->html->document
Mozilla：div->body->html->document->window
2.捕获型事件
思想：与冒泡型事件事件顺序相反。事件按照从最不特定的事件目标到最特定的事件目标的顺序触发。
eg:
IE:document->html->body->div
Mozilla：window->document->html->body->div
3.DOM中的事件流
同时支持两种事件模型：捕获型事件和冒泡型事件，但捕获型事件先发生。
eg：window->document->html->body->div->body->html->document->window
所以对于事件目标是接受了2次事件，一次是捕获过程，一次是冒泡过程。
二、事件处理函数
定义：用于响应某个事件而调用的函数。
IE：
attachEvent()用来给一个事件添加事件处理函数
detachEvent()用来给一个事件分离事件处理函数
[object].attachEvent("event",fn) 或者 [object].event=fn
[object].detachEvent("event",fn)
DOM:
addEventListener()添加事件
removeEventListener()删除事件
[object].addEventListener("event",fn,booleanValue)booleanValue若是true，则表示用于捕获阶段；若是false，则表示用于冒泡阶段
[object].removeEventListener("event",fn,booleanValue)
[object].event=fn这样事件处理函数会被添加到冒泡阶段
五、事件对象
1.访问事件对象
IE:var oEvent=window.event;
DOM:var oEvent=arguments[0];
2.IE\DOM相似性
获取事件类型：oEvent.type
获取按键代码：oEvent.keyCode
检测Shift、Alt、Ctrl键：oEvent.shiftKey\oEvent.altKey\oEvent.ctrlKey
获取鼠标指针在客户端区域（浏览器中显示网页的部分）的坐标：oEvent.clientX\oEvent.clientY
获取鼠标指针在计算机屏幕中（整个计算机窗口）的坐标：oEvent.screenX\oEvent.screenY
3.IE\DOM 区别
获取目标：
IE:var oTarget=oEvent.srcElement;
DOM：var oTarget=oEvent.target;
获取字符代码：
IE:var iCharCode=oEvent.keyCode;
DOM：var iCharCode=oEvent.charCode;
阻止某事件的默认行为：
IE:oEvent.returnValue=false;
DOM:oEvent.preventDefault();
停止事件复制（冒泡）
IE:oEvent.cancelBubble=true;
DOM：oEvent.stopPropagation();

五、事件类型
1.鼠标事件
click:用户点击鼠标左键时发生（如果右键也按下则不会发生）。当用户的焦点在按钮上，并且按了回车键，同样也会触发这个事件。
dbclick:用户双击鼠标左键时发生（如果右键也按下则不会发生）
mousedown:用户点击任意一个鼠标按钮时发生
mouseout:鼠标指针在某个元素上，且用户将要移除元素边界时发生
mouseover:鼠标移除某个元素，到另一个元素时发生
mouseup：用户松开任意一个按钮时发生
mousemove:鼠标在某个元素上持续时发生

2.键盘事件
keydown:用户在键盘上按下某按键时发生
keypress:用户按下一个键，并且产生一个字符时发生
keyup:用户释放按着的按键时发生

3.HTML事件
load事件:完全载入后
unload事件:完全卸载后
abort事件:用户停止下载过程时，如果object对象还未完全载入时触发
error事件:出错时
select事件:选择时
change事件:发生改变
submit事件:提交
reset事件:重置
resize事件:改变大小
scroll事件:滚动
focus事件:获得焦点
blur事件:失去焦点

4.突变事件
DOMSubtreeModified:当文档或元素子树因为添加或删除节点而改变时触发
DOMNodeInserted:当一个节点作为另一个节点的子节点插入时触发
DOMNodeRemoved:当一个节点作为另一个节点的子节点删除时触发
DOMNodeRemoveFromDocument:当一个节点从文档中删除时触发
DOMNodeInsertedIntoDocument:当一个节点插入到文档中触发

六、跨平台事件
var EventUtil=new Object;
添加事件：
EventUtil.addEventHandler=function(oTarget,sEventType,fnHandler){
if(oTarget.addEventListener){
oTarget.addEventListener(sEventType,fnHandler,false);
}else if(oTarget.attachEvent){
oTarget.attachEvent("on"+sEventType,fnHandler);
}else{
oTarget["on"+sEventType]=fnHandler;
}
}
删除事件：
EventUtil.removeEventHandler=function(oTarget,sEventType,fnHandler){
if(oTarget.removeEventListener){
oTarget.removeEventListener(sEventType,fnHandler,false);
}else if(oTarget.detachEvent){
oTarget.detachEvent("on"+sEventType,fnHandler);
}else{
oTarget["on"+sEventType]=null;
}
}