JavaScript学习笔记——事件（转自：http://www.blogjava.net/amigoxie/archive/2007/08/27/139711.html）

guoyiqi

浏览: 1001795 次

最近访客更多访客>>

wry3407

zzc125

bingjava

秋天你慢慢来

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

说明：本文为《JavaScript高级程序设计》第9章学习笔记。

一．今天的事件

事件是DOM的一部分，在DOM Level1中未定义任何事件，在Level中定义了一小部分子集，完整的事件是在Level3中规定的，该标准在2004年最终定案。

Mozilla的事件模式与DOM标准最为接近，IE成为唯一一个对DOM事件模式缺乏良好支持的浏览器。

二．事件流

事件流意味着在页面上可有不仅一个，甚至多个元素响应同一个事件。

1.冒泡型事件

IE上的解决方案的绰号为冒泡的技术。冒泡型事件的基本思想是，时间按照最特定的目标到最不特定的事件目标的顺序触发。

IE6.0中，<html/>元素也可接收冒泡的时间。

2.捕获型事件

Netscape Navigator4.0使用了捕获型事件的解决方案。事件从最不确定的对象（document对象）开始触发，然后到最精确。

3．DOM事件流

DOM同时支持两种事件模型：捕获型事件和冒泡型事件，但是，捕获型事件先发生。两种事件流会触发DOM中的所有对象，从document对象开始，也在document对象结束。

DOM事件模型的最独特的性质是，文本节点也触发事件（在IE中不会）。

三．时间处理函数/监听函数

事件是用户或浏览器自身进行的特定行为。这些事件都有自己的名字，如click、load等。用于响应某个事件而调用的函数称为事件处理函数。

如果是JavaScript中分配的事件处理函数，则需要首先获得要处理对象的引用，然后将函数赋值给事件处理函数属性，eg1.

varoDiv=document.getElementById(“div1”);

oDiv.onclick=function(){

alert(“Iwasclicked.”);

}

用这个分配方法，事件处理函数必须小写，才能正确响应事件。

Eg2. <div onclick=”alert(‘I was clicked.’)”></div>

在例二中，事件处理函数的大小写可以任意

1.IE

在IE中，每个元素和window对象都有两个方法：attachEvent()和detachEvent()。attachEvent()用来给一个事件附加事件处理函数。而detachEvent()用来将事件处理函数分离出来。Eg.

varfnClick=function(){

alert(“Clicked!”);

}

varoDiv=document.getElementById(“div1”);

oDiv.attachEvent(“onclick”,fnClick);

oDiv.detachEvent(“onclick”,fnClick);

2.DOM

DOM方法addEventListener()和removeEventListener()用来分配和移除事件处理函数。与IE不同，这些方法需要三个参数：事件名称、要分配的函数和处理函数用于冒泡阶段（为false时）还是捕获阶段（为true时）。Eg.

oDiv. addEventListener (“onclick”, fnClick, false);

oDiv.removeEventListener (“onclick”, fnClick, false);

如果使用传统方法直接给事件处理函数属性赋值，事件处理函数将被添加到事件的冒泡阶段，eg.

oDiv.onclick = fnClick;

oDiv.removeEventListener (“onclick”, fnClick, false);

四．事件对象

事件对象只在发生事件时才被创建，且只有事件处理函数才能访问。所有事件处理函数执行完毕后，事件对象就被销毁。

1.定位

在IE中，事件对象是window对象的一个属性event，也就是说，事件处理函数必须这样访问事件对象：

oDiv.onclick = function() {

var oEvent = window.event;

}

Event对象只能在事件发生时访问。所有的事件处理函数执行完毕后，事件对象就被销毁。

2.属性/方法

见页面233-235页，在此不详述。

3.相似性

1）获取事件类型

下面代码可在任何浏览器中获取事件的类型：

var sType = oEvent.type;

它返回“click”或“mouseover”之类的值。Eg.

functionhandleEvent(oEvent){

if(oEvent.type==“click”){

alert(“Clicked!”);

}elseif(oEvent.type==“mouseover”){

alert(“mouseover!”);

}

oDiv.onclick=handleEvent;

oDiv.onmouseover=handleEvent;

2）获取按键代码

Eg. var iKeyCode = oEvent.keyCode;

例如，Enter键的keyCode为13，空格键的keyCode为32，回退键为8.

3）检测Shift、Alt和Ctrl键

Eg.var bShift = oEvent.shiftKey;

var bAlt = oEvent.altKey;

var bCtrl = oEvent.ctrlKey;

4）获取客户端坐标

Eg. var iClientX = oEvent.clientX;

var iClientY = oEvent.clientY;

5）获取屏幕坐标

可用screenX和screenY属性来获取鼠标指针在计算机屏幕中的位置

var iScreenX = oEvent.screenX;

var iScreenY = oEvent.screenY;

4．区别

1）获取目标

在IE中：var oTarget = oEvent.srcElement;

在DOM兼容的浏览器中：var oTarger = oEvent.target;

2）获取字符代码

在IE中：var iCharCode = oEvent.keyCode;

在DOM兼容的浏览器中：var iCharCode = oEvent.charCode;

3）阻止某个事件的默认行为

在IE中：oEvent.returnValue = false;

在DOM兼容的浏览器中：oEvent.preventDefault();

4）阻止事件复制（冒泡）

在IE中：oEvent.cancelBubble = true;

在mozilla中：oEvent.stopPropagation ();

五．事件的类型

DOM标准定义了以下几种事件:

鼠标事件
键盘事件

HTML事件：窗口发生变动或者发生特定的客户端-服务端交互时触发；

突变事件：底层的DOM结构发生改变时触发。

1.鼠标事件

Eg. click、dbclick、mousedown、mouseout、mouseover、mouseup、mouseover。

1）属性

Eg.坐标属性（eg。clientX和clientY等）、type属性、target或srcElement属性、shiftKey、ctrlKey、altKey、metaKey（DOM）属性、button属性（只在mousedown、mouseover、mouseout、mouseover和mouseup事件中）。

2）顺序

在同一个目标上要按顺序发生以下事件: mousedown->mouseup->click->mousedown->mouseup->click->dbclick。

2.键盘事件

键盘事件有：keydown、keypress和keyup。

1）事件的属性

对某个键盘事件，会填入如下的事件属性: keyCode、charCode（仅DOM）、target(DOM)或者srcElement（IE）、shiftKey、ctrlKey、altKey、metaKey（DOM）属性。

2）顺序

按下一个字符键，发生事件顺序为: keydown->keypress->keyup;

按下一个非字符键，发生事件顺序为:keydown->keyup。

3.HTML事件

HTML事件有: load、unload、abort、error、select、change、submit、reset、resize、scroll、focus、blur事件。

1）load和unload事件

eg. window.onload = function() {

alert(“loaded!”);

}

2）resize事件

resize事件用来判断何时动态的改变某些元素。Eg.

最大化或最小化窗口时，也会触发resize事件。

3）Scroll事件

Eg. <body onscroll=”alert(‘Scroll)”>

4．变化事件

变化事件包括如下内容：

DOMSubtreeModified——当文档或者元素的子树因为添加或删除节点而改变时触发；

DOMNodeInserted——当一个节点作为另一个节点的子节点插入时触发；

DOMNodeRemoved——当一个节点作为另一个节点的子节点删除时触发；

DOMNodeRemovedFromDocument——当一个节点从文档中删除时触发；

DOMNodeInsertedIntoDocument——当一个节点插入到文档中时触发。

这些事件的目的是，提供一个独立于语言的事件范围，使其可使用在所有基于XML的语言中。

六．跨平台的事件

1.EventUtil对象

var EventUtil = new Object;

2.添加/删除事件处理函数

EventUtil.addEventHandler=function(){

if(oTarget.addEventListener){//对DOM兼容的浏览器

oTarget.addEventListener(sEventType,fnHandler,false);

}elseif(oTarget.attachEvent){//对IE

oTarget.attachEvent("on"+sEventType,fnHandler);

}else{

oTarget["on"+sEventType]=fnHandler;

}

EventUtil.removeHandler=function(oTarget,sEventType,fnHandler){

if(oTarget.removeEventListener){//对DOM兼容的浏览器

oTarget.removeEventListener(sEventType,fnHandler,false);

}elseif(oTarget.detachEvent){//对IE

oTarget.detachEvent("on"+sEventType,fnHandler);

}else{

oTarget["on"+sEventType]=null;

}

3.格式化event对象

一种对付IE和DOM中的event对象之间区别的最佳手段是，调整它们使之尽可能地表现相似，因为更多的浏览器使用的是DOM的事件类型，所以将IE的事件模型调整为接近于DOM事件模型就可以了。

根据DOM属性/方法与IE属性/方法的不同，最后可得出如下的格式化event对象函数，如下所示：

EventUtil.formatEvent=function(oEvent){

if(isIE&&isWin){

oEvent.charCode=(oEvent.type=="keypress")?oEvent.keyCode:0;

oEvent.eventPhase=2;

oEvent.isChar=(oEvent.charCode>0);

oEvent.pageX=oEvent.clientX+document.body.scrollLeft;

oEvent.pageY=oEvent.clientY+document.body.scrollTop;

oEvent.preventDefault=function(){

this.returnValue=false;

};

if(oEvent.type=="mouseout"){

oEvent.relatedTarget=oEvent.toElement;

}elseif(oEvent.type=="mouseover"){

oEvent.relatedTarget=oEvent.fromElement;

}

oEvent.stopPropagation=function(){

this.cancelBubble=true;

};

oEvent.target=oEvent.srcElement;

oEvent.time=(newDate()).getTime();

}

returnoEvent;

}

4. 获取事件对象

IE和DOM使用不同的方法来获取event对象。在IE中，event对象是与window对象相关的，而在DOM中，它独立于任何其他对象，并且是作为参数传递的。下面我们编写一个通用的获取event对象的函数，代码如下：

EventUtil.getEvent=function(){

if(window.event){

returnthis.formatEvent(window.event);

}else{

returnEventUtil.getEvent.caller.arguments[0];

}

调用举例如下：

oDiv.onclick=function(){

varoEvent=EventUtil.getEvent();

}

七. 小结

本章详细介绍了JavaScript中事件、事件流的概念，详细研究了event对象，最后一节还创建了一个跨浏览器事件库，可使用同一套方法来访问事件对象，添加/删除事件处理函数，而无需考虑浏览器检测的问题。

分享到：

currentStyle IE和ff 获取外联样式（转自 ... | scroll事件（转自：http://flare.iteye.com ...

2011-05-20 00:28
浏览 270
评论(0)
查看更多

发表评论

您还没有登录,请您登录后再发表评论

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论