Event(事件模型).ppt

Event Javascript的事件模型,走上.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-document-window. FF1.X divhtml-documentbody FF2.X 捕获型事件 NS document-div,事件流,DOM事件流 支持两种事件模型， 先捕获型，后冒泡型 Window-document-body-div-div-body-document-window DOM中在div级别上再向下文本节点等级发散。 div-(text)-div(IE不支持),事件模块和类型,HTMLEvents Event(接口) 所有接口父接口 abort/blur/change/error/focus/load/reset/resize/scroll/select/submit/unload MouseEvents MouseEvent(接口) Click/mousedown/mousemove/mouseout/mouseover/mouseup UIEvents UIEvent(接口)此接口为MouseEvent父接口 DOMActivate/DOMFocusIn/DOMFocusOut,Event接口,type 事件类型：如：click mouseover target 发生事件的节点：可能与currentTarget不同。 currentTarget 发生当前正在处理的事件的节点(如果在起泡阶段或捕捉阶段处理与target不同)。在事件处理过程中。尽量使用currentTarget而不使用this. 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为两次(快速) 不管如何。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，与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();,获取Event对象,DOM event作为参数传入得到事件触发时创建的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内的对象aaa 解决方案：不在HTML事件句柄中直接访问对象。,事件句柄的返回值,可以让事件句柄返回false来阻止浏览器执行那个动作。 例外： 当鼠标移动到link上时在状态栏显示URL。如果不希望这样（取消此操作）,可以返回true.如： ,HTML事件句柄,HTML事件句柄2 onclick等 /事件句柄函数如果给定返回值 false;则HTML对象默认的标准动作（如a的转向链接动作）将不会被执行。 注意: 只能使用在非HTML标签中的事件句柄生效.解决方案见下页.,Return false2,HTML form中使用下句: onsubmit=“validate(event)“ 直接在HTML中事件句柄时. 使用return false不能终止正常事件流.使用右边解决方案.将return false换成相应的Event接口属性/方法 IE:returnValue FF: 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 e.preventDefault(); /替换return false ,HTML事件,HTML事件句柄1 load/unload/abort(停止加载 )/error(js出错)/select/change/submit/reset/resize/scroll/focus/blur load/unload/resize/scroll分配给window window.onload (最终还是通过window.onload实现，此为js规定，因为window不能直接控制document，所以借以实现。document.body.onload在head 部分执行会出现问题。因为此时的body还未产生，所以应用：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.断定来自哪里（元素），去到哪里（元素）。 触发顺序：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 为捕获阶段 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中事件发生顺序： onclick-attachEvent-detachEvent(detach不能移除onclick事件句柄) 以上删除，只能删除自己添加的，而传统添加的则无法删除，除非将它赋个空。,事件对象,事件对象只在发生事件时创建，只有事件处理函数能访问，所有事件处理函数执行完毕后，事件对象销毁。 引起事件对象 事件发生时鼠标信息 事件发生时键盘信息 IE中事件对象 事件对象是window的一个属性event. 访问方式： window.event.type FF中事件对象 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, 事件处理函数会被认为是分配给对象的方法。,对老式浏览器隐藏脚本,