Event(事件模型)
合集下载
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
Event
Javascript的事件模型
走上.net软件工程师的道路
本章目标
事件流 事件接口 HTML事件 鼠标事件 事件模型
事件
DOM level1(没有事件) DOM level2(一小部分子集) DOM level3(完整的事件模型) 浏览器
IE 专有事件模型 Mozilla FF 与DOM事件标准最为接近
事件中的this
<img src=―‖ onclick=―this.src=‗url‘ ‖> 事件处理函数会被认为是分配给对象的方法。
对老式浏览器隐藏脚本
<!--开始隐藏
脚本代码
//隐藏结束-->
IE： oEvent.cancelBubble=true; FF: oEvent.stopPropБайду номын сангаасgation();
阻止事件源缺省行为
IE： oEvent.returnValue=false; FF: oEvent.preventDefault();
得到事件源对象
IE： oEvent.srcElement; DOM: oEvent. target;
HTML事件
HTML事件句柄1
load/unload/abort(停止加载 )/error(js出 错)/select/change/submit/reset/resize/scroll/focus/blur load/unload/resize/scroll分配给window
window.onload (<body onload=‗‘>最终还是通过window.onload实现，此为js 规定，因为window不能直接控制document，所以借以实现。 document.body.onload在head 部分执行会出现问题。因为此时的body还未产 生，所以应用：window.onload)
addEventListener(―name_of_event‖,fnHandler,bCapture)
– div.addEventListener(―click‖,fnClick,true);//true 为捕获阶段
removeEventListener(―name_of_event‖,fnHandler,bCapture);
IE
div.attachEvent(―name_of_event_handler‖,fnHandler);
– 添加事件（多个attachEvent可引发多次执行） – document.attachEvent(―onclick‖,fnHandler);
div.detachEvent(―name_of_event_handler‖,fnHandler);
引起事件对象 事件发生时鼠标信息 事件发生时键盘信息
IE中事件对象
事件对象是window的一个属性event. 访问方式： window.event.type
FF中事件对象
event作为唯一参数传给事件处理函数， function(oEvent){oEvent.type}
事件对象
停止事件复制 （取消冒泡）
<form> <input type="text" name="window" id="aaa"> <input type="button" onClick="alert(window.id)" value="ok"> </form> //此window非全局的window对象了。为触发事件句柄作用域form内的对象aaa
HTMLEvents
Event(接口) 所有接口父接口
abort/blur/change/error/focus/load/reset/resize/scroll/select/submit/unload
MouseEvents
UIEvents
MouseEvent(接口)
Click/mousedown/mousemove/mouseout/mouseover/mouseup
eventPhase
指定当前所处的事件传播阶段。是一个常量。1(捕获),2(目标),3(冒泡)
CAPTURING_PHASE AT_TARGET BUBBLING_PHASE
timeStamp
一个Date对象，声明了事件何时发生。
bubbles
一个布尔值，声明该事件是否在文档树中起泡.
cancelable
事件句柄的作用域
函数总在定义它们的作用域中运行，而不是在调 用他们的作用域中运行。 HTML事件句柄：
直接使用：<a href=―#‖ onclick=―open()‖> 此时的open()为：document.open()而不是默认的window.open(); 作用域链的链头是调用对象(即函数定义作用域)，下一个对象为触发事件 句柄的对象…
– 移除事件 IE中事件发生顺序： onclick-attachEvent-detachEvent…(detach不能移除onclick事件句柄) 以上删除，只能删除自己添加的，而传统添加的则无法删除，除非将它赋个空。
事件对象
事件对象只在发生事件时创建，只有事件处理函数能访问，所有事件 处理函数执行完毕后，事件对象销毁。
MouseEvent接口
button
鼠标状态，0：左，1：中，2：右。NS6(1,2,3)/IE6(1,4,2)
altKey,ctrlKey,metaKey,shiftKey
是否按住：alt/ctrl/meta/shift键
clientX,clientY
鼠标与浏览器窗口的X，Y坐标，(window.pageXOffset/window.pageYOffset)
判断浏览器
erAgent. toLowerCase().indexOf("msie")
事件流
事件流
冒泡型事件
IE5.5顺序是 div --body--document. 在IE6中 div-body--html--document. mozilla的顺序是
– – div--body--html--document--window. –FF1.X div—html--document—body– FF2.X
获取Event对象
DOM event作为参数传入得到事件触发时创建 的event对象。 IE window.event得到event对象。
事件处理函数
传统的：
click,mouseover,….
– div.click=fn1; – div.click=fn2; //fn2覆盖fn1.只执行fn2
HTML事件句柄
HTML事件句柄2
onclick等 //事件句柄函数如果给定返回值 false;则HTML对象默认的标准动 作（如a的转向链接动作）将不会被执行。 注意: 只能使用在非HTML标签中的事件句柄生效.解决方案见下页.
Return false2
HTML form中使用下句: onsubmit="validate(event)―
鼠标事件
鼠标事件
click,dblclick,mousedown,mouseout,mouseover,mouseup,mousemove
事件的属性：
坐标属性：clientX/clientY等 获取鼠标坐标 type属性： target(DOM) 或 srcElement(IE)属性 获取标签名 button属性(只在mousedown,over,out,move,up事件中生效) shitfKey,ctrlKey,altKey,metaKey(DOM)属性 键盘属性 附加属性：relatedTarget.tagName//应用于over,out.断定来自哪里（元素）， 去到哪里（元素）。 触发顺序：mousedown,mouseup,click,dblclick
screenX,screenY
鼠标与屏幕的X，Y坐标。
relatedTarget
鼠标刚刚离开的那个对象
IE事件模型属性
window.event(事件触发产生此对象)
type
删除’on’，与DOM Event兼容
srcElement
与DOM Event target兼容
button //1,2,4,3(左右一起) clientX,clientY offsetX,offsetY altKey,ctrlKey,shiftKey keyCode //得到键值 fromElement/toElement //移出和移至元素对象 cancelBubble //等同stopPropagation()阻止事件起泡，将其值设为true returnValue //false等同DOM preventDefault();
UIEvent(接口)此接口为MouseEvent父接口
DOMActivate/DOMFocusIn/DOMFocusOut
Event接口
type
事件类型：如：click mouseover
target
发生事件的节点：可能与currentTarget不同。
currentTarget
发生当前正在处理的事件的节点(如果在起泡阶段或捕捉阶段处理与target不同)。在事件处理过程中。尽量使用 currentTarget而不使用this.
捕获型事件
NS document-div…
事件流
DOM事件流
支持两种事件模型，
先捕获型，后冒泡型 Window-document-body-div-div-body-document-window DOM中在div级别上再向下文本节点等级发散。 …div-(text)-div…(IE不支持)
事件模块和类型
布尔值，声明该事件是否具有能用preventDefault()取消的默认动作。
preventDefault()
阻止事件进行下一操作。相当于0级DOM的 return false;
UIEvent接口
view
发生事件的window对象。或称视图
detail
一个数字，1为单击一次。2为两次(快速)
不管如何。1总是发生在最前面。
直接在HTML中事件句柄时. 使用return false不能终止正常 事件流.使用右边解决方案. 将return false换成相应的 Event接口属性/方法
IE:returnValue FF: preventDefault()
function validate(e){ var value = $('username').value; var reg = /\w{3,15}/; if(!reg.test(value)){ $('username').value = ''; $('username').focus(); if(window.event){ window.event.returnValue = false; }else{ e.preventDefault(); //替换return false } } }
键盘事件
键盘事件句柄
Keydown,keypress(产生一个字符发生，即按下持续发生，alt ,shift,ctrl除 外),keyup 事件属性：
shiftKey,ctrl.alt.meta(按下shift等键时，将相应值设为true,并触发事件 keydown)
注册为事件句柄
DOM (FF)
解决方案：不在HTML事件句柄中直接访问对象。
事件句柄的返回值
可以让事件句柄返回false来阻止浏览器执行那个动作。 例外：
当鼠标移动到link上时在状态栏显示URL。如果不希望这样（取消此操 作）,可以返回true.如： <a href=―#‖ onmouseover=―window.status=‗ ‘;return true;‖>
Javascript的事件模型
走上.net软件工程师的道路
本章目标
事件流 事件接口 HTML事件 鼠标事件 事件模型
事件
DOM level1(没有事件) DOM level2(一小部分子集) DOM level3(完整的事件模型) 浏览器
IE 专有事件模型 Mozilla FF 与DOM事件标准最为接近
事件中的this
<img src=―‖ onclick=―this.src=‗url‘ ‖> 事件处理函数会被认为是分配给对象的方法。
对老式浏览器隐藏脚本
<!--开始隐藏
脚本代码
//隐藏结束-->
IE： oEvent.cancelBubble=true; FF: oEvent.stopPropБайду номын сангаасgation();
阻止事件源缺省行为
IE： oEvent.returnValue=false; FF: oEvent.preventDefault();
得到事件源对象
IE： oEvent.srcElement; DOM: oEvent. target;
HTML事件
HTML事件句柄1
load/unload/abort(停止加载 )/error(js出 错)/select/change/submit/reset/resize/scroll/focus/blur load/unload/resize/scroll分配给window
window.onload (<body onload=‗‘>最终还是通过window.onload实现，此为js 规定，因为window不能直接控制document，所以借以实现。 document.body.onload在head 部分执行会出现问题。因为此时的body还未产 生，所以应用：window.onload)
addEventListener(―name_of_event‖,fnHandler,bCapture)
– div.addEventListener(―click‖,fnClick,true);//true 为捕获阶段
removeEventListener(―name_of_event‖,fnHandler,bCapture);
IE
div.attachEvent(―name_of_event_handler‖,fnHandler);
– 添加事件（多个attachEvent可引发多次执行） – document.attachEvent(―onclick‖,fnHandler);
div.detachEvent(―name_of_event_handler‖,fnHandler);
引起事件对象 事件发生时鼠标信息 事件发生时键盘信息
IE中事件对象
事件对象是window的一个属性event. 访问方式： window.event.type
FF中事件对象
event作为唯一参数传给事件处理函数， function(oEvent){oEvent.type}
事件对象
停止事件复制 （取消冒泡）
<form> <input type="text" name="window" id="aaa"> <input type="button" onClick="alert(window.id)" value="ok"> </form> //此window非全局的window对象了。为触发事件句柄作用域form内的对象aaa
HTMLEvents
Event(接口) 所有接口父接口
abort/blur/change/error/focus/load/reset/resize/scroll/select/submit/unload
MouseEvents
UIEvents
MouseEvent(接口)
Click/mousedown/mousemove/mouseout/mouseover/mouseup
eventPhase
指定当前所处的事件传播阶段。是一个常量。1(捕获),2(目标),3(冒泡)
CAPTURING_PHASE AT_TARGET BUBBLING_PHASE
timeStamp
一个Date对象，声明了事件何时发生。
bubbles
一个布尔值，声明该事件是否在文档树中起泡.
cancelable
事件句柄的作用域
函数总在定义它们的作用域中运行，而不是在调 用他们的作用域中运行。 HTML事件句柄：
直接使用：<a href=―#‖ onclick=―open()‖> 此时的open()为：document.open()而不是默认的window.open(); 作用域链的链头是调用对象(即函数定义作用域)，下一个对象为触发事件 句柄的对象…
– 移除事件 IE中事件发生顺序： onclick-attachEvent-detachEvent…(detach不能移除onclick事件句柄) 以上删除，只能删除自己添加的，而传统添加的则无法删除，除非将它赋个空。
事件对象
事件对象只在发生事件时创建，只有事件处理函数能访问，所有事件 处理函数执行完毕后，事件对象销毁。
MouseEvent接口
button
鼠标状态，0：左，1：中，2：右。NS6(1,2,3)/IE6(1,4,2)
altKey,ctrlKey,metaKey,shiftKey
是否按住：alt/ctrl/meta/shift键
clientX,clientY
鼠标与浏览器窗口的X，Y坐标，(window.pageXOffset/window.pageYOffset)
判断浏览器
erAgent. toLowerCase().indexOf("msie")
事件流
事件流
冒泡型事件
IE5.5顺序是 div --body--document. 在IE6中 div-body--html--document. mozilla的顺序是
– – div--body--html--document--window. –FF1.X div—html--document—body– FF2.X
获取Event对象
DOM event作为参数传入得到事件触发时创建 的event对象。 IE window.event得到event对象。
事件处理函数
传统的：
click,mouseover,….
– div.click=fn1; – div.click=fn2; //fn2覆盖fn1.只执行fn2
HTML事件句柄
HTML事件句柄2
onclick等 //事件句柄函数如果给定返回值 false;则HTML对象默认的标准动 作（如a的转向链接动作）将不会被执行。 注意: 只能使用在非HTML标签中的事件句柄生效.解决方案见下页.
Return false2
HTML form中使用下句: onsubmit="validate(event)―
鼠标事件
鼠标事件
click,dblclick,mousedown,mouseout,mouseover,mouseup,mousemove
事件的属性：
坐标属性：clientX/clientY等 获取鼠标坐标 type属性： target(DOM) 或 srcElement(IE)属性 获取标签名 button属性(只在mousedown,over,out,move,up事件中生效) shitfKey,ctrlKey,altKey,metaKey(DOM)属性 键盘属性 附加属性：relatedTarget.tagName//应用于over,out.断定来自哪里（元素）， 去到哪里（元素）。 触发顺序：mousedown,mouseup,click,dblclick
screenX,screenY
鼠标与屏幕的X，Y坐标。
relatedTarget
鼠标刚刚离开的那个对象
IE事件模型属性
window.event(事件触发产生此对象)
type
删除’on’，与DOM Event兼容
srcElement
与DOM Event target兼容
button //1,2,4,3(左右一起) clientX,clientY offsetX,offsetY altKey,ctrlKey,shiftKey keyCode //得到键值 fromElement/toElement //移出和移至元素对象 cancelBubble //等同stopPropagation()阻止事件起泡，将其值设为true returnValue //false等同DOM preventDefault();
UIEvent(接口)此接口为MouseEvent父接口
DOMActivate/DOMFocusIn/DOMFocusOut
Event接口
type
事件类型：如：click mouseover
target
发生事件的节点：可能与currentTarget不同。
currentTarget
发生当前正在处理的事件的节点(如果在起泡阶段或捕捉阶段处理与target不同)。在事件处理过程中。尽量使用 currentTarget而不使用this.
捕获型事件
NS document-div…
事件流
DOM事件流
支持两种事件模型，
先捕获型，后冒泡型 Window-document-body-div-div-body-document-window DOM中在div级别上再向下文本节点等级发散。 …div-(text)-div…(IE不支持)
事件模块和类型
布尔值，声明该事件是否具有能用preventDefault()取消的默认动作。
preventDefault()
阻止事件进行下一操作。相当于0级DOM的 return false;
UIEvent接口
view
发生事件的window对象。或称视图
detail
一个数字，1为单击一次。2为两次(快速)
不管如何。1总是发生在最前面。
直接在HTML中事件句柄时. 使用return false不能终止正常 事件流.使用右边解决方案. 将return false换成相应的 Event接口属性/方法
IE:returnValue FF: preventDefault()
function validate(e){ var value = $('username').value; var reg = /\w{3,15}/; if(!reg.test(value)){ $('username').value = ''; $('username').focus(); if(window.event){ window.event.returnValue = false; }else{ e.preventDefault(); //替换return false } } }
键盘事件
键盘事件句柄
Keydown,keypress(产生一个字符发生，即按下持续发生，alt ,shift,ctrl除 外),keyup 事件属性：
shiftKey,ctrl.alt.meta(按下shift等键时，将相应值设为true,并触发事件 keydown)
注册为事件句柄
DOM (FF)
解决方案：不在HTML事件句柄中直接访问对象。
事件句柄的返回值
可以让事件句柄返回false来阻止浏览器执行那个动作。 例外：
当鼠标移动到link上时在状态栏显示URL。如果不希望这样（取消此操 作）,可以返回true.如： <a href=―#‖ onmouseover=―window.status=‗ ‘;return true;‖>