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事件等几个事件组。

原文地址:https://www.cnblogs.com/zhaoxin786695/p/3989302.html