首页 > 代码库 > Javascript事件模型
Javascript事件模型
事件流
事件冒泡
针对事件流，IE使用的是事件冒泡技术。基本思想是，事件从事件发生的最内部开始触发，向上触发到最外部（document对象）。
事件捕获
事件捕获与事件冒泡正好是相反的，它的事件触发顺序是从最外层的对象（document）到最里层的对象。
DOM事件流
DOM是同时支持事件捕获和事件冒泡，但事件捕获先发生。两个事件都可以遍历DOM中的所有码对象，起点和终点都是document(很多准的兼容浏览器可以一直捕获/冒泡到window对象).DOM事件流中文本节点也能接收事件。
事件处理程序/监听器
事件处理程序的指派方法有两种：
1． 传统事件处理指派方法，可以为一个事件指派一个事件处理程序，它被所有的浏览器支持。
2． 现代事件处理程序指派方法，可以为一个事件指派多个事件处理程序，只被现代的浏览器支持，而且存在浏览器不兼容的问题。
传统的事件处理程序指派方法
1． 在javaScript 中/在HTML中将事件处理程序指派给事件。
2． 在XHTML标记事件处理属性中指定。
<div> onclick=”alert(‘我被点击了’)”</div>
现代事件处理程序的指派方法
1． 针对IE浏览器
在IE中,每个元素和window对象有两个方法：
a. attachEvent() 将一个事件处理程序绑定到一个事件。
b. detachEvent() 用于解除事件处理程序的绑定。
[object].attcahEvent(“事件名称” , 函数 );
[object].detachEvent(“事件名称” , 函数 );
Var oDiv = document.getElementByIdx_x(“div1”);
oDiv.attachEvent(“onclick”, fnClick ); //添加事件处理程序
oDiv. detachEvent (“onclick”, fnClick ); //删除事件处理程序
2． 针对兼容DOM的浏览器
addEventListener() 事件处理程序的指派
removeEventListenter() 事件处理程序的删除任务
这两个方法都有三个参数：
分别是 事件的名称，要指派的函数，处理程序是否用冒泡/捕获阶段（true 用在捕获阶段 , false用在冒泡阶段）
[object].addEventListener(“事件名称” , 函数名 , bCaptrue);
[object]. removeEventListenter (“事件名称” , 函数名 , bCaptrue);
oDiv.addEventlistener(“click” , fnclick , false ); //事件处理程序用于冒泡阶段
oDiv. removeEventListenter (“click” , fnclick , false );
注意：同一个事件处理程序的指派和删除，它们的bCaptrue一定是相同的，如果不相同，则会删失败，但不会报错。
3． 兼容性问题的解决
因为IE和DOM下对现代的事件处理程序指派的方式不同，我们可以分别使用两种方式来向每一个事件指派事件处理程序（编写两份）。
Var fnlick1 = function (){alert(“我被点击了”);};
Var fnlick2 = function (){alert(“我也被点击了”);};
If( document.addElementListener ){ //针对IE浏览器
oDiv.addEventListener(“click” , fnlick1 , true);
oDiv.addEventListener(“click” , fnlick2 , true);
}else if( document.attachEvent ){ //针对DOM浏览器
oDiv.attachEvent( “onclick” , fnlick1 );
oDiv.attachEvent( “onclick” , fnlick2 );
}
事件处理程序的返回值
Event对象
浏览器开发者创建了Event对象，这个对象包含了事件发生时的特定信息，包括：
触发事件的对象
事件发生时鼠标信息
事件发生时键盘信息
定位
在IE 中Event对象是window对象的一个属性。事件处理程序必须按照如下的方式访问：
oDiv.onclick = function(){
var oEvent = window.event;
}
在所有的事件执行完了后，Event对象就会被销毁。
在DOM中规定：Event对象只能作为仅有的参数传递给事件处理程序，所以必须是：
oDiv.onclick = function(){
var.oEvent = arguments[0];
}
也可：
oDiv.onclick = function(oEvent){
}
为了正确使用Event对象，我们就必须先判断浏览器是IE还是DOM兼容的浏览器：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>测试浏览器</title>
<script type="text/javascript">
function browserType(oEvent){
if(window.event){
document.getElementByIdx_x("p1").innerHTML = "IE浏览器";
}else if(oEvent){
document.getElementByIdx_x("p1").innerHTML = "DOM浏览器";
}
}
function test(oEvent){
alert(String.fromCharCode(oEvent.keyCode));
}
</script>
</head>
<body >
<!--<p onclick="browserType(event);">Hello ,javascript Event Object</p>
<p id="p1" >到底是什么浏览器呢</p>-->
<div align="center">只作测试<input type="text" id="i1" onkeydown="test(event);" /></div>
</body>
</html>
属性和方法
相同点：
尽管IE跟DOM兼容的浏览器有很多不兼容的地方，但也有一些它们的相同点。
获取事件类型：
Var sType = oEvent.type;
获取键盘代码：
Var ikeyCode = oEvent.keyCode;
检测Shift , Alt , Ctrl是否按下:
oEvent.shiftKey;
oEvent.altKey;
oEvent.ctrlKey;
它们返回的是一个Boolean值，也触发一个keydown事件，可以得到它的keyCode值。
获取客户区坐标：
oEvent.clientX; //X坐标
oEvent.clientY; //Y坐标
获取屏幕坐标：
即鼠标相对于屏幕的位置。
oEvent.screenX; //鼠标X坐标
oEvent.screenY; //鼠标Y坐标
不同点：
IE：
获取目标oEvent.srcElement;
获取字符码 oEvent.charCode;
阻止事件的默认行为 oEvent.returnValue = false ;
中止事件传播 oEvent.cancelBubble = true ;
DOM：
获取目标 oEvent.target;
获取字符码 oEvent.charCode;
阻止事件的默认行为oEvent.preventDefault();
中止事件传播 oEvent.stopPropagation();
事件类型
鼠标事件
Click / Enter 单击事件
Dblclick 双击事件
Mousedown 按下任意鼠标键
Mouseout 鼠标移出
Mouseover 鼠标越过
Mouseup 鼠标释放
Mousemove 光标在一个元素上时，重复发生此事件
键盘事件
Keydown 按下一个键时，按住不放重复发生
Keypress 按下一个键时，按住不放重复发生，不包括shift , Alt , Ctrl等。
Keyup 释放一个按下的键
HTML事件
Load 页面被全部装载
Unload 页面被全部卸载
Abort 用户终止装载进程之前，它还没有被完全装载触发此事件
Error javaScript发生错误/页面不能被正常的装载触发此事件
Select 在一个文本框中，用户选择一个或多个字符时触发此事件
Change 失去焦点，且值被改变时触发此事件
Submit 表单的提交按钮被点击时
Reset 表单的重置按钮被点击时
Resize 窗口/框架的尺寸被调整时
Scroll 滚动页面
Focus获得焦点
Blur 失去焦点
总结：
事件是用户或者浏览器操作网页时发生的行为。
事件流是网页上的元素相应事件的顺序。
事件流在不同种类浏览器中有所不同。在IE浏览器中，采用的是事件冒泡；在Netscapte Navigator4.0中，采用事件捕获；在遵循标准的DOM兼容浏览器中，采用的是先捕获后冒泡。
为响应一个事件而被调用的函数称为事件处理程序。事件处理程序用两个方式之一来指定：在JavaScript中或者在HTML中。
Event对象只在事件发生时创建，并且可以被事件处理程序访问。在所有事件处理程序执行完成后，event对象就被销毁了。
根据触发事件的对象以及事件触发的行为，浏览器中发生的事件可以分组为鼠标事件、键盘事件、HTML事件等几个事件组。
Javascript事件模型