JavaScript事件模型

一、事件流

　　事件流意味着页面上不止一个元素可以相应相同的事件。逻辑上，每个元素必须能以指定顺序响应事件。事件顺序是IE4.0和Netscapte4.0中支持的事件之间的主要不同点。

1.事件冒泡

　　对于IE，解决方案是使用事件冒泡技术。基本思想是，事件从事件发生的目标最内部开始出发，向上触发到最外部（document对象）。

　　如果在IE5.5中点击div元素，事件以如下顺序冒泡：

　　　　1)<div/>

　　　　2).<body/>

　　　　3)document

2.事件捕获

　　事件捕获与冒泡正好相反，它的事件触发顺序是从最外层的对象（document对象）到最里层的对象。事件捕获也可以window级的事件，但是需要开发者显示指定。Netscape Navigator也不能处理页面上所有元素的事件。

　　如果在Netscape4.x中点击div元素，事件按照如下路径触发：

　　　　1)document

　　　　2)div

3.DOM事件流

　　DOM同时支持事件捕获和事件冒泡，但是事件捕获先发生。两个事件流可以遍历DOM中的所有的对象，起点和结束点为document对象。

　　因为事件目标（div元素）是最里层的元素（DOM树的最深层），它实际上连续接受事件两次：一次在捕获阶段；一次在冒泡阶段。

　　DOM事件模型的一个特色是，文本节点也可以触发事件（IE不行）。

二、事件处理程序/监听器

　　事件是被用户或者浏览器执行的某种行为。这些事件被命名为click、load和mouseover等等。为响应一个事件而被调用的函数称为事件处理程序（DOM中叫做事件监听器）。响应click事件的函数称为onclick事件处理程序。事件处理程序的指派方法有两种方式：一种是传统事件处理程序指派方法，被所有浏览器支持；一种为现代事件处理指派方法，只现代浏览器支持。

1） 传统事件处理程序指派方法

　　传统的事件处理程序指派方法采用两种方式之一将事件处理程序指派给事件：在JS中或者在HTML中。

　　A． 在JS中指定事件处理程序

　　　　例子：var v=document.getElementById(“div1”);

　　　　　　　V.onclick=funtion(){

　　　　　　　alert(“我被点了”)

　　　　　　　}

在使用已有函数的时候应该注意：

　　1） 在绑定事件处理程序到事件属性时，只能引用函数的名称，后面不能加括号。

　　2） 不管函数是如何定义的，必须确保在XHTML元素被添加到DOM之前，登记事件处理程序。

　　B.  在HTML标记的事件处理属性中指定

　　如果要在XHTML中指派事件处理程序，只需要在HTML标记中添加一个事件处理属性，并且将恰当的脚本代码作为属性值。

　　例子：<div onclick=”alert(‘我被点击’)”></div>

　　必须注意：在HTML中，无论采取哪种指派方式，事件处理程序的名称必须全部是小写字母。

　　3） 现代事件处理程序指派方法

　　1） IE浏览器

　　在IE中，每个元素和window对象有两个方法：attachEvent()和detachEvent()。attachEvent()用于将一个处理程序绑定到一个事件，而detachEvent()用于解除事件处理程序的绑定。这两个方法都有两个参数：要指派的事件处理程序的名称（例如，onclick）、函数名称。其语法格式为：

　　[object].attachEvent(“事件处理程序的名称”,”函数”)；

　　[object].detachEvent(“事件处理程序的名称”,”函数”)；

2） DOM

　　DOM中使用addEventListener()和removeEventListener()方法完成事件处理程序指派和删除的任务。这两种方法有三个参数，分别是事件的名称、要指派的函数、是否处理程序要用在冒泡或捕获阶段。如果处理程序要用在捕获阶段，第三个参数就设为true；如果要用在冒泡阶段，这个参数就设为false。其通用语法：

　　[object]. addEventListener(“事件名称”,函数名,bCapture)

　　[object]. removeEventListener (“事件名称”,函数名,bCapture)

3） 兼容性问题的解决

　　为确保代码在IE和DOM浏览器下都能用，采用如下代码来解决：

　　If(docement.addEventListener){

　　　　v. addEventListener (“click”,fnClick1,true);

　　　　v.addEventListener(“click”,fnClick2,true);

　　}else if(

　　　　document.attachEvent){

　　　　　　v.attachEvent(“onclick”,fnClick1);

　　　　　　v.attachEvent(“onclick”,fnClick2);

　　}

三、事件处理程序的返回值

　　为取消一个事件的默认行为，可以从它的时间处理程序中返回一个false值。当一个表单的submit处理程序返回false，表单的提交被取消。同样，返回false的在一个链接的click事件处理程序，将组织浏览器装载目标链接。

　　Click--单选按钮和复选框取消设置。对于submit按钮，表单提交被取消。对于reset按钮，表单不被重置。对于链接，不装载链接目标。

• dragdrop--取消拖曳。
• keydown--在用户按住键不放时，取消随后的keypress事件。
• keypress--取消keypress事件。
• mosedown--取消默认行为（拖的开始、选择的开始、解除链接）。
• mouseover--导致对window的status或defaultStatus属性的改变被浏览器忽略。Submit--取消表单提交。

四、Event对象

　　浏览器的开发者创建了一个event对象，这个对象包含了事件发生时的特定信息，包括：

　　　　1） 触发事件的对象

　　　　2） 事件发生时的鼠标信息

　　　　3）事件发生时的键盘信息

Event对象只在事件发生时创建，并且可以被事件处理程序访问。在所有事件处理程序执行完成后，event对象就被销毁。

　　1） 定位

　　在IE浏览器中，event对象是window对象的一个属性。

　　　　例子：v.onclick=function(){

　　　　　　   Var v1=window.event

　　　　　　　}

　　DOM标准中规定：event对象只能作为仅有的参数传给事件处理程序。

　　　　例子：v.onclick=function(){

　　　　　　　Var v1=arguments[0];

　　　　　　　}

判断浏览器类型的方法：

　　　　If(window.event){     //判断是不是IE浏览器

　　　　　　Document.getElementById(“p1”).innerHTML=”IE”；

　　　　}

　　　　Else if(oEvent){ //判断是不是DOM浏览器

　　　　　　Document.getElementById(“p1”).innerHTML=”DOM”;

　　　　}

2） 属性和方法

　　IE浏览器的event对象的属性和方法

　Button,cancelBubble,clientX,clietY,ctrlkey,fromElement,keyCode,offsetX,offset,repeat,returnValue,screenX,screen,shiftKey,srcElement,toElement,type,x,y.

DOM的event对象的属性和方法

AltKey,bubbles,button,cancelable,cancelBubble,charCode,clientX,clicentY,ctrlKey,currentTarget,detail,eventPhase,isChar,keyCode,metaKey,pageX,pageY,preventDefault(),relatedTarget,screenX,screenY,shiftKey,stopPropagation(),target,timestamp,type.

3） 相同点

　　1） 获取事件类型

　　　　在两种类型的浏览器中都可以使用同样的代码：

　　　　Var sType=oEvent.type;

　　2） 获取键盘代码（leydown/keyup事件）

　　　　在keydown或者keyup事件期间，可以使用keyCode属性获取按键代码

　　　　Var iKeyCode=oEvent.keyCode;

　　3） 检测shift,alt,ctrl

　　　　为检测shift、alt或者ctrl键是否被按下，都采用同样的方法：

　　　　　　Var shift=oEvent.shiftKey;

　　　　　　Var alt=oEvent.altKey;

　　　　　　Vat ctrl=oEvent.ctrlKey;

　　4） 获取客户区坐标

　　　　在鼠标事件期间，通过clientX和clientY属性，可以获取鼠标指针相对于客户

　　5） 获取屏幕坐标

　　　　在鼠标事件期间，通过screenX和screenY属性，可以获取鼠标指针相对于计算机屏幕的位置：

　　　　　　Var iScreenX=oEvent.screenX;

　　　　　　Var iScreenY=Event.screenY;

　　4） 不同点

　　　　1） 获取目标

　　　　　　在IE中，目标包含在event对象的srcElement属性中：

　　　　　　Var oTargrt=oEvent.srcElement;

　　　　　　在DOM浏览器中，目标包含在target属性中：

　　　　　　Var oTargrt=oEvent.target;

　　　　2） 获取字符码

　　　　　　IE的keyCode属性返回字符码。

　　　　　　例子：var iCharCode=oEvent.keyCode;

　　　　　　在DOM浏览器中，按键代码和字符代码是分离的。为得到字符代码，必须使用charCode属性：

　　　　　　　　Var iCharCode=oEvent.charCode;

　　　　　　　　Var schar=string.fromcharcode(oEvent.charcode);

　　　　3） 阻止时间的默认行为

　　　　　　在IE中，为阻止默认的事件行为，必须将returnValue属性设置为false:

　　　　　　　　oEvent.returnValue=fals;

　　　　　　在DOM浏览器中，则是调用preventDefault()方法：

　　　　　　　　oEvent.preventDefault();

　　　　4） 中止事件传播（冒泡）

　　　　　　在IE中，必须将cancelBubble属性设为true：

　　　　　　　　oEvent.cancelBubble=true;

　　　　　　在DOM中，只需调用stopPropagation()方法：

　　　　　　　　oEvent.stopPropagation();

五、事件类型

　　根据触发事件的对象以及事件触发的行为，浏览器中发生的事件可以分组成为几个特定的类型。DOM规范中定义了几个事件组：

　　鼠标事件--用户使用鼠标执行某个任务时触发鼠标事件。

　　键盘事件--用户在键盘上打字时触发键盘事件。

　　HTML事件--当浏览器窗口或特定的客户机服务器交互发生改变时处罚HTML事件。

　　1.鼠标事件

　　　　Click,dbclick,mousedown,mouseout,mouseover,mouseup,mousemove.

　　　　1)事件属性:

• 对于每个鼠标事件，属性被填入event对象：
• 坐标属性
• Type属性
• Taget或srcElement属性
• shiftKey,ctrKey,altKey,metaKey属性
• button属性

　　事件发生次序

　　在同一目标上，click事件触发前，mousedown和mouseup事件依次发生。

　　1.mousedown2.mouseup3.click4.mousedown5.mouseup6.click7.dbclick

　　2.键盘事件

　　键盘事件在用户使用键盘时发生，包括：

• Keydown:当用户在键盘上按下一个键时发生。如果按住不放它就重复发生。
• Keypress：当用户在键盘上按下一个字符键（不包括shift和ctrl）时发生。如果按住不放它就重复发生。
• Keyup：当用户释放一个按下的键时发生。

　　事件属性：

• KeyCode属性
• CharCode属性（DOM）
• Target(DOM)或srcElement(IE)属性
• ShiftKey,ctrKey,altKey和metaKey(DOM)属性

　　事件发生次序：

　　当用户按下一个字符键一次时，事件发生的次序：

1. keydown
2. keypress
3. keyup

　　当用户按下一个非字符键一次时，事件发生的次序：

1. keydown
2. keyup

3.HTML事件

• Load事件——在窗口中，当页面全部装载时；
• Unload事件——在窗口中，当页面被全部卸载时；
• Abort事件——在object元素中，当用户中止装载进程之前，如果还没有被完全装载；
• Error事件——在窗口中，当一个JS错误发生时；
• Select事件——在一个文本框中，当用户选择一到多个字符时，触发；
• Change事件——在一个文本框中，当它失去焦点，并且其值被改变；
• Submit事件——当表单的提交按钮被点击时；
• Reset事件——当表单的重置按钮被点击时；
• Resize事件——当窗口或框架尺寸调整时；
• Scroll事件——当有用户滚动有滚动条的任何元素时；
• Focus事件——当任何元素或者窗口获得焦点时；
• Blur事件——当任何元素或者窗口失去焦点时；