浅谈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对象的方式为var oEvent =window.event;它只有在事件发生时才可以访问。判断浏览器是IE还是DOM浏览器的方式是: functionbrowserType (oEvent){ if(window.event) { } elseif(oEvent){} }

IE的event和DOM的event的相同点：获取事件类型(var sType =oEvent.type;)、获取键盘代码(var iKeyCode =oEvent.keyCode;)、检测Shift,Alt,Ctrl(var bShift = oEvent.shiftKey;varbAlt = oEvent.altKey; var bCtrl = oEvent.ctrlKey;)、获取客服区坐标(variClientX = oEvent.clientX;var iClientY =oEvent.clientY;)、获取屏幕坐标(var iScreenX = oEvent.screenX;var iScreenY= oEvent.screenY;)；不同点：IE获取目标 var oTarget =oEvent.srcElement;DOM为var oTarget = oEvent.target;获取字符码：IE:variCharCode = oEvent.keyCode;DOM:var iCharCode =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。