标签：style io ar os 使用 sp java div on
一、事件流
事件流意味着页面上不止一个元素可以相应相同的事件。逻辑上，每个元素必须能以指定顺序响应事件。事件顺序是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按钮，表单不被重置。对于链接，不装载链接目标。
四、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)事件属性:
事件发生次序
在同一目标上，click事件触发前，mousedown和mouseup事件依次发生。
1.mousedown2.mouseup3.click4.mousedown5.mouseup6.click7.dbclick
2.键盘事件
键盘事件在用户使用键盘时发生，包括：
事件属性：
事件发生次序：
当用户按下一个字符键一次时，事件发生的次序：
当用户按下一个非字符键一次时，事件发生的次序：
3.HTML事件
标签：style io ar os 使用 sp java div on
原文地址：http://www.cnblogs.com/LeeX/p/4101825.html
