Event(事件模型)

《Event(事件模型)》由会员分享，可在线阅读，更多相关《Event(事件模型)（26页珍藏版）》请在装配图网上搜索。

1、EventJavascript的事件模型的事件模型走上.net软件工程师的道路本章目标事件流事件接口HTML事件鼠标事件事件模型事件DOM level1(没有事件)DOM level2(一小部分子集)DOM level3(完整的事件模型)浏览器IE 专有事件模型Mozilla FF 与DOM事件标准最为接近判断浏览器navigator.userAgent.toLowerCase().indexOf(msie)事件流事件流冒泡型事件IE5.5顺序是 div -body-document.在IE6中 div-body-html-document.mozilla的顺序是 div-body-html-

2、document-window.FF1.X divhtml-documentbody FF2.X捕获型事件NS document-div事件流DOM事件流支持两种事件模型，先捕获型，后冒泡型Window-document-body-div-div-body-document-windowDOM中在div级别上再向下文本节点等级发散。div-(text)-div(IE不支持)事件模块和类型HTMLEvents Event(接口)所有接口父接口 abort/blur/change/error/focus/load/reset/resize/scroll/select/submit/unloadMo

3、useEvents MouseEvent(接口)Click/mousedown/mousemove/mouseout/mouseover/mouseupUIEvents UIEvent(接口)此接口为MouseEvent父接口 DOMActivate/DOMFocusIn/DOMFocusOutEvent接口type事件类型：如：click mouseovertarget发生事件的节点：可能与currentTarget不同。currentTarget发生当前正在处理的事件的节点(如果在起泡阶段或捕捉阶段处理与target不同)。在事件处理过程中。尽量使用currentTarget而不使用thi

4、s.eventPhase指定当前所处的事件传播阶段。是一个常量。1(捕获),2(目标),3(冒泡)CAPTURING_PHASE AT_TARGET BUBBLING_PHASE timeStamp一个Date对象，声明了事件何时发生。bubbles一个布尔值，声明该事件是否在文档树中起泡.cancelable布尔值，声明该事件是否具有能用preventDefault()取消的默认动作。preventDefault()阻止事件进行下一操作。相当于0级DOM的 return false;UIEvent接口view发生事件的window对象。或称视图detail一个数字，1为单击一次。2为两次(快

5、速)不管如何。1总是发生在最前面。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)screenX,screenY鼠标与屏幕的X，Y坐标。relatedTarget鼠标刚刚离开的那个对象IE事件模型属性window.event(事件触发产生此对象事件触发产生此对象)type删除删除on，

6、与，与DOM Event兼容兼容srcElement与与DOM Event target兼容兼容button/1,2,4,3(左右一起左右一起)clientX,clientYoffsetX,offsetYaltKey,ctrlKey,shiftKeykeyCode/得到键值得到键值fromElement/toElement /移出和移至元素对象移出和移至元素对象cancelBubble/等同等同stopPropagation()阻止事件起泡，将其值设为阻止事件起泡，将其值设为truereturnValue/false等同等同DOM preventDefault();获取Event对象DOM e

7、vent作为参数传入得到事件触发时创建的event对象。IE window.event得到event对象。事件处理函数传统的：click,mouseover,.div.click=fn1;div.click=fn2;/fn2覆盖fn1.只执行fn2事件句柄的作用域函数总在定义它们的作用域中运行，而不是在调用他们的作用域中运行。HTML事件句柄：直接使用：此时的open()为：document.open()而不是默认的window.open();作用域链的链头是调用对象(即函数定义作用域)，下一个对象为触发事件句柄的对象/此window非全局的window对象了。为触发事件句柄作用域form内的

8、对象aaa解决方案：不在HTML事件句柄中直接访问对象。事件句柄的返回值可以让事件句柄返回false来阻止浏览器执行那个动作。例外：当鼠标移动到link上时在状态栏显示URL。如果不希望这样（取消此操作）,可以返回true.如：HTML事件句柄HTML事件句柄2onclick等/事件句柄函数如果给定返回值 false;则HTML对象默认的标准动作（如a的转向链接动作）将不会被执行。注意:只能使用在非HTML标签中的事件句柄生效.解决方案见下页.Return false2HTML form中使用下句:onsubmit=validate(event)“直接在直接在HTML中事件句柄时中事件句柄时.

9、使用使用return false不能终止正常不能终止正常事件流事件流.使用右边解决方案使用右边解决方案.将将return false换成相应的换成相应的Event接口属性接口属性/方法方法IE:returnValueFF:preventDefault()function validate(e)var value=$(username).value;var reg=/w3,15/;if(!reg.test(value)$(username).value=;$(username).focus();if(window.event)window.event.returnValue=false;else

10、 e.preventDefault();/替换替换return false HTML事件HTML事件句柄1load/unload/abort(停止加载)/error(js出错)/select/change/submit/reset/resize/scroll/focus/blurload/unload/resize/scroll分配给window window.onload(最终还是通过window.onload实现，此为js规定，因为window不能直接控制document，所以借以实现。document.body.onload在head 部分执行会出现问题。因为此时的body还未产生，所以

11、应用：window.onload)鼠标事件鼠标事件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.断定来自哪里（元素），去到

12、哪里（元素）。触发顺序：mousedown,mouseup,click,dblclick键盘事件键盘事件句柄Keydown,keypress(产生一个字符发生，即按下持续发生，alt,shift,ctrl除外),keyup事件属性：shiftKey,ctrl.alt.meta(按下shift等键时，将相应值设为true,并触发事件 keydown)注册为事件句柄DOM (FF)addEventListener(“name_of_event”,fnHandler,bCapture)div.addEventListener(“click”,fnClick,true);/true 为捕获阶段remo

13、veEventListener(“name_of_event”,fnHandler,bCapture);IEdiv.attachEvent(“name_of_event_handler”,fnHandler);添加事件（多个attachEvent可引发多次执行）document.attachEvent(“onclick”,fnHandler);div.detachEvent(“name_of_event_handler”,fnHandler);移除事件IE中事件发生顺序：onclick-attachEvent-detachEvent(detach不能移除onclick事件句柄)以上删除，只能删

14、除自己添加的，而传统添加的则无法删除，除非将它赋个空。事件对象事件对象只在发生事件时创建，只有事件处理函数能访问，所有事件处理函数执行完毕后，事件对象销毁。引起事件对象事件发生时鼠标信息事件发生时键盘信息IE中事件对象事件对象是window的一个属性event.访问方式：window.event.typeFF中事件对象event作为唯一参数传给事件处理函数，function(oEvent)oEvent.type事件对象停止事件复制（取消冒泡）IE：oEvent.cancelBubble=true;FF:oEvent.stopPropagation();阻止事件源缺省行为IE：oEvent.returnValue=false;FF:oEvent.preventDefault();得到事件源对象IE：oEvent.srcElement;DOM:oEvent.target;事件中的this事件处理函数会被认为是分配给对象的方法。对老式浏览器隐藏脚本