[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;
}
}
一、事件流
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;
}
}