js事件详解-0-1-2级模型

事件(上)(不好意思,又是标题党)JavaScript事件列表事件解说一般事件onclick鼠标点击时触发此事件ondblclick鼠标双击时触发此事件onmousedown按下鼠标时触发此事件onmouseup鼠标按下后松开鼠标时触发此事件onmouseover当鼠标移动到某对象范围的上方时触发此事件onmousemove鼠标移动时触发此事件onmouseout当鼠标离开某对象范围时触发此事件onkeypress当键盘上的某个键被按下并且释放时触发此事件.onkeydown当键盘上某个按键被按下时触发此事件onkeyup当键盘上某个按键被按放开时触发此事件页面相关事件onabort图片在下载时被用户中断onbeforeunload当前页面的内容将要被改变时触发此事件onerror出现错误时触发此事件onload页面内容完成时触发此事件onmove浏览器的窗口被移动时触发此事件onresize当浏览器的窗口大小被改变时触发此事件onscroll浏览器的滚动条位置发生变化时触发此事件onstop浏览器的停止按钮被按下时触发此事件或者正在下载的文件被中断oncontextmenu当弹出右键上下文菜单时发生onunload当前页面将被改变时触发此事件表单相关事件onblur当前元素失去焦点时触发此事件onchange当前元素失去焦点并且元素的内容发生改变而触发此事件onfocus当某个元素获得焦点时触发此事件onreset当表单中RESET的属性被激发时触发此事件onsubmit一个表单被递交时触发此事件了解上面的事件如此简单，那么事件还有什么可讲的呢？问题一：每个事件只能注册一个函数Js代码varoDiv=document.getElementById(oDiv);oDiv.onclick=fn1;oDiv.onclick=fn2;functionfn1(){alert(我被覆盖了！)}functionfn2(){alert(只有我被执行到！)}解决方案一：Js代码obj.onclick=function(){fn1();fn2();fn3();};缺陷一：需要将所有函数一次添加进去，不能在运行时添加缺陷二：在事件处理函数中this将指向window,而不是obj解决方案二：Js代码functionaddEvent(fn,evtype,obj){//obj是要添加事件的HTML元素对象//evtype是事件名字，不包含on前缀，因为每个都有on，所以写个on是多余的//fn是事件处理函数varoldFn;if(obj[on+evtype]instanceofFunction){oldFn=obj[on+evtype];//当添加函数时，如果已注册过了，则将其保存起来}obj[on+evtype]=function(){if(oldFn){oldFn.call(this);}fn.call(this);//使用call方法，使事件处理函数中的this仍指向obj};}这样已经解决了问题，但如何删除事件呢？如果直接将对象的onevtype这类的属性赋值为null将会删除所有的事件处理函数！解决方案二的修改版：先将事件存储起来，存储在对象的__EventHandles属性里面Js代码eventHandlesCounter=1;//计数器，将统计所有添加进去的函数的个数,0位预留作其它用functionaddEvent(fn,evtype,obj){if(!fn.__EventID){//__EventID是给函数加的一个标识，见下面给函数添加标识的部分fn.__EventID=eventHandlesCounter++;//使用一个自动增长的计数器作为函数的标识以保证不会重复}if(!obj.__EventHandles){obj.__EventHandles=[];//当不存在，也就是第一次执行时，创建一个，并且是数组}if(!obj.__EventHandles[evtype]){//将所有事件处理函数按事件类型分类存放obj.__EventHandles[evtype]={};//当不存在时也创建一个散列表if(obj[on+evtype]instanceofFunction){//查看是否已经注册过其它函数//如果已经注册过，则将以前的事件处理函数添加到下标为0的预留的位置obj.__EventHandles[evtype][0]=obj[on+evtype];obj[on+evtype]=handleEvents;//使用handleEvents集中处理所有的函数}}obj.__EventHandles[evtype][fn.__EventID]=fn;//如果函数是第一次注册为事件处理函数，那么它将被添加到表中，函数的标识作为下标//如果函数已经注册过相同对象的相同事件了，那么将覆盖原来的而不会被添加两次functionhandleEvents(){varfns=obj.__EventHandles[evtype];for(variinfns){fns[i].call(this);}}}使用上面的函数已经可以在一个对象添加多个事件处理函数，在函数内部this关键字也指向了相应的对象，并且这些函数都被作了标识，那么移除某个事件处理函数就是轻而易举的了！Js代码//使用传统方法：obj.onevtype=null;但这样会移除所有的事件处理函数functiondelEvent(fn,evtype,obj){if(!obj.__EventHandles||!obj.__EventHandles[evtype]||!fn.__EventID){returnfalse;}if(obj.__EventHandles[evtype][fn.__EventID]==fn){deleteobj.__EventHandles[evtype][fn.__EventID];}}-------------------------------------------------新手的分隔线----------------------------------------------------------------事件(下)事件对象——Event事件对象是用来记录一些事件发生时的相关信息的对象。事件对象只有事件发生时才会产生，并且只能是事件处理函数内部访问，在所有事件处理函数运行结束后，事件对象就被销毁！访问事件对象：W3CDOM方法与IE专用方法Js代码//W3CDOM把事件对象作为事件处理函数的第一个参数传入进去document.onclick=function(evt){//这样，事件对象只能在对应的事件处理函数内部可以访问到alert(evt);};//IE将事件对象作为window对象的一个属性（相当于全局变量）//貌似全局对象，但是只有是事件发生时才能够访问alert(window.event);//nullwindow.onload=function(){alert(window.event);};事件对象的属性及方法鼠标相关属性名值类型读/写描述buttonIntegerR对于特定的鼠标事件，表示按下的鼠标按钮，该属性仅可以在mouseup与mousedown事件中访问。W3C规定：0表示按下了左键，1表示按下了中键，2表示按下了右键，相当于对于鼠标键从左到右进行的编号，而编号从0开始；而IE有另外一套规定：0表示没有任何键按下，1表示左键，2表示右键，4表示中键，而其它按键的组合则只要将键码相加即可，如：同时按下左右键时button值为3clientXIntegerR事件发生时，鼠标在客户端区域的X坐标，客户端区域是指页面可视区域clientYIntegerR事件发生时，鼠标在客户端区域的Y坐标screenXIntegerR(IE)R/W(W3C)相对于屏幕的鼠标X坐标screenYIntegerR(IE)R/W(W3C)相对于屏幕的鼠标Y坐标x(仅IE)IntegerR鼠标相对于引起事件的元素的父元素的X坐标y(仅IE)IntegerR鼠标相对于引起事件的元素的父元素的Y坐标offsetX(仅IE)layerX(仅W3C)IntegerR鼠标相对于引起事件的对象的X坐标offsetY(仅IE)layerY(仅W3C)IntegerR鼠标相对于引起事件的对象的Y坐标pageX(仅W3C)IntegerR鼠标相对于页面的X坐标pageY(仅W3C)IntegerR鼠标相对于页面的Y坐标键盘相关属性名值类型读/写描述altKeyBooleanRtrue表示按下了ALT键；false表示没有按下ctrlKeyBooleanRtrue表示按下了CTROL，false表示没有shiftKeyBooleanRtrue表示按下了shift，false表示没有keyCodeIntegerR/W(IE)R(W3C)对于keypress事件，表示按下按钮的Unicode字符；对于keydown/keyup事件，表示按下按钮的数字代号charCode(仅W3C)IntegerR在keypress事件中所按键的字符Unicode编码，如果不是字符键，则该属性为0，并且，当CapsLock打开与关闭时charCode的值也对应着大小写字母其它属性名值类型读/写描述srcElement(IE)target(W3C)ElementR引起事件的元素fromElement(仅IE)ElementR某些鼠标事件中(mouseover与mouseout)，鼠标所离开的元素toElement(仅IE)ElementR某些鼠标事件中(mouseover与mouseout)，鼠标所进入的元素relatedTarget(仅W3C)ElementR某些鼠标事件中(mouseover与mouseout)，返回与事件的目标节点相关的节点。repeat(仅IE)BooleanR如果不断触发keydown事件，则为true,否则为falsereturnValue(仅IE)BooleanR/W将其设为false表示以取消事件的默认动作preventDefault(仅W3C)FunctionR执行方法以取消事件的默认动作typeStringR事件的名称，不带on前缀cancelable(仅W3C)BooleanR当为true表示事件的默认动作可以被取消（用preventDefault方法取消）cancelBubble(仅IE)BooleanR/W将其设置为true将取消事件冒泡stopPropagation(仅W3C)FunctionR执行方法取消事件冒泡bubbles(仅W3C)BooleanR返回true表示事件是冒泡类型eventPhase(仅W3C)IntegerR返回事件传播的当前阶段。它的值是下面的三个常量之一，它们分别表示捕获阶段、在目标对象上时和起泡阶段：常量值Event.CAPTURING_PHASE(捕获阶段)1Event.AT_TARGET(在目标对象上)2Event.BUBBLING_PHASE(冒泡阶段)3timeStamp(仅W3C)LongR返回一个时间戳。指示发生事件的日期和时间（从epoch开始的毫秒数）。epoch是一个事件参考点。在这里，它是客户机启动的时间。并非所有系统都提供该信息，因此，timeStamp属性并非对所有系统/事件都是可用的。取得事件对象及取得事件目标对象Js代码document.onclick=function(evt){evt=evt||window.event;//在IE中evt会是undefined//而支持W3CDOM事件的浏览器中事