浅谈JavaScript中的事件模型

事件模型(DOM)是指处理事件的方式,在JavaScript中由于对事件模型的支持方式不同,主要分为非DOM浏览器(主要代表是IE浏览器)和DOM浏览器(主要代表是火狐浏览器等)。

在一个相同事件由不同元素实现时,就形成了事件流,即事件的执行顺序。事件的执行顺序分为冒泡技术和事件捕获技术。冒泡技术是主要针对IE的解决方案,其基本思想是事件从事件的发生目标最内部开始触发,向上触发到最外部,它是沿着DOM层次向上冒泡,直到顶部,所谓的DOM层次是指最内部元素开始,依次向上到达它的父层,直到最顶部的父层元素;事件捕获技术刚好与冒泡技术相反;DOM即支持冒泡技术,又支持事件捕获技术,但是事件捕获先于冒泡捕获发生。

事件处理程序即监听器分为传统事件处理程序和现代事件处理程序。传统事件处理程序被所有浏览器所支持,但是不能为某一个事件添加多个处理方法,而现代处理程序在不同的浏览器有不同的实现方式。在使用已有的函数时必须注意在绑定事件处理程序到事件属性时,只能引用函数的名称,后面不能加括号,同时必须确保在HTML元素被添加到DOM之前,登记事件处理程序。在现代事件处理程序中,必须区分好IE浏览器和DOM浏览器的使用,在IE浏览器中,每个元素和window对象有两个方法:attachEvent()和detachEvent(),其语法格式为[Object].attachEvent(“事件处理程序的名称”,函数),[Object].detachEvent(“事件处理程序的名称”,函数),这里的事件处理程序名称前必须加上on;DOM浏览器中是通过addEventListener()和removeEventListener()方法完成事件处理程序指派和删除的任务。其语法为[Object].addEventListener(“事件名称”,函数名,bCapture);[Object].removeEventListener(“事件名称”,函数名,bCapture),第三个参数是用于程序是处理在捕获阶段(参数为true)还是在冒泡阶段(参数为false)。

在IE中Event对象是window对象的一个属性,因此事件处理程序访问event对象的方式为varoEvent=window.event;它只有在事件发生时才可以访问。判断浏览器是IE还是DOM浏览器的方式是:functionbrowserType(oEvent){if(window.event){}elseif(oEvent){}}

IE的event和DOM的event的相同点:获取事件类型(varsType=oEvent.type;)、获取键盘代码(variKeyCode=oEvent.keyCode;)、检测Shift,Alt,Ctrl(varbShift=oEvent.shiftKey;varbAlt=oEvent.altKey;varbCtrl=oEvent.ctrlKey;)、获取客服区坐标(variClientX=oEvent.clientX;variClientY=oEvent.clientY;)、获取屏幕坐标(variScreenX=oEvent.screenX;variScreenY=oEvent.screenY;);不同点:IE获取目标varoTarget=oEvent.srcElement;DOM为varoTarget=oEvent.target;获取字符码:IE:variCharCode=oEvent.keyCode;DOM:variCharCode=oEvent.charCode;阻止事件的默认行为:IE:oEvent.retrunValue=false;DOM:oEvent.preventDefault();中止事件传播:IE:oEvent.cancelBubble=true;DOM:oEvent.stopPropagation();

在JavaScript中DOM定义了三个事件类型:鼠标事件、键盘事件和HTML事件。鼠标事件包括:单击鼠标click、双击鼠标dblclick、按下任意鼠标按钮mousedown、将鼠标移出元素边界mouseout、将鼠标移到元素上mouseover、释放鼠标按钮mouseup、在一个元素上重复发生mousemove;键盘事件包括:在键盘上按下键时keydown、在键盘下按下一个字符键keypress、释放一个按键keyup;HTML事件包括:所有的东西被全部装载时load、全部页面被卸载unload、用户中止装载进程前而它没有被全部装载时abort、对象不能被装载error、用户触发select事件的select、值被改变时change、按钮被点击时submit、点击重置按钮reset、窗口大小被调整时resize、滚动有滚动条的任何元素是scroll、获得焦点时focus、失去焦点时blur。

相关推荐