一.今天的事件
事件是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.
用这个分配方法,事件处理函数必须小写,才能正确响应事件。
![](https://i-blog.csdnimg.cn/blog_migrate/4f1150b881333f12a311ae9ef34da474.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/1fa987a29c6482f53d401256f96355eb.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/ca75c07623e1b494fee67e8f316fc310.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/9b8a8a44dd1c74ae49c20a7cd451974e.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/d18c02628675d0a2c816449d98bda930.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/8f1ba5b45633e9678d1db480c16cae3f.gif)
Eg2. <div οnclick=”alert(‘I was clicked.’)”></div>
在例二中,事件处理函数的大小写可以任意
1. IE
在IE中,每个元素和window对象都有两个方法:attachEvent()和detachEvent()。attachEvent()用来给一个事件附加事件处理函数。而detachEvent()用来将事件处理函数分离出来。Eg.
![](https://i-blog.csdnimg.cn/blog_migrate/1fa987a29c6482f53d401256f96355eb.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/ca75c07623e1b494fee67e8f316fc310.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/9b8a8a44dd1c74ae49c20a7cd451974e.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/d18c02628675d0a2c816449d98bda930.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/8f1ba5b45633e9678d1db480c16cae3f.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/4f1150b881333f12a311ae9ef34da474.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/4f1150b881333f12a311ae9ef34da474.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/4f1150b881333f12a311ae9ef34da474.gif)
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.2) 获取按键代码
![](https://i-blog.csdnimg.cn/blog_migrate/1fa987a29c6482f53d401256f96355eb.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/ca75c07623e1b494fee67e8f316fc310.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/9b8a8a44dd1c74ae49c20a7cd451974e.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/97e794c86028c5f5b5461ae5ef440a4c.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/3c6cafce68eb941a00f1998f1d3d3aa6.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/9b8a8a44dd1c74ae49c20a7cd451974e.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/d18c02628675d0a2c816449d98bda930.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/97e794c86028c5f5b5461ae5ef440a4c.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/3c6cafce68eb941a00f1998f1d3d3aa6.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/9b8a8a44dd1c74ae49c20a7cd451974e.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/d18c02628675d0a2c816449d98bda930.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/ecedf933ec37d714bd4c2545da43add2.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/8f1ba5b45633e9678d1db480c16cae3f.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/4f1150b881333f12a311ae9ef34da474.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/4f1150b881333f12a311ae9ef34da474.gif)
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.
<body οnresize=”alert(‘Resizing’)”>
最大化或最小化窗口时,也会触发resize事件。
3) Scroll事件
Eg. <body οnscrοll=”alert(‘Scroll)”>
4.变化事件
变化事件包括如下内容:
DOMSubtreeModified——当文档或者元素的子树因为添加或删除节点而改变时触发;
DOMNodeInserted——当一个节点作为另一个节点的子节点插入时触发;
DOMNodeRemoved——当一个节点作为另一个节点的子节点删除时触发;
DOMNodeRemovedFromDocument——当一个节点从文档中删除时触发;
DOMNodeInsertedIntoDocument——当一个节点插入到文档中时触发。
这些事件的目的是,提供一个独立于语言的事件范围,使其可使用在所有基于XML的语言中。
六.跨平台的事件
1. EventUtil对象
var EventUtil = new Object;
2. 添加/删除事件处理函数3. 格式化event对象
![](https://i-blog.csdnimg.cn/blog_migrate/1fa987a29c6482f53d401256f96355eb.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/ca75c07623e1b494fee67e8f316fc310.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/9b8a8a44dd1c74ae49c20a7cd451974e.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/97e794c86028c5f5b5461ae5ef440a4c.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/3c6cafce68eb941a00f1998f1d3d3aa6.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/9b8a8a44dd1c74ae49c20a7cd451974e.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/d18c02628675d0a2c816449d98bda930.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/97e794c86028c5f5b5461ae5ef440a4c.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/3c6cafce68eb941a00f1998f1d3d3aa6.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/9b8a8a44dd1c74ae49c20a7cd451974e.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/d18c02628675d0a2c816449d98bda930.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/97e794c86028c5f5b5461ae5ef440a4c.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/3c6cafce68eb941a00f1998f1d3d3aa6.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/9b8a8a44dd1c74ae49c20a7cd451974e.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/d18c02628675d0a2c816449d98bda930.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/ecedf933ec37d714bd4c2545da43add2.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/8f1ba5b45633e9678d1db480c16cae3f.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/4f1150b881333f12a311ae9ef34da474.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/1fa987a29c6482f53d401256f96355eb.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/ca75c07623e1b494fee67e8f316fc310.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/9b8a8a44dd1c74ae49c20a7cd451974e.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/97e794c86028c5f5b5461ae5ef440a4c.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/3c6cafce68eb941a00f1998f1d3d3aa6.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/9b8a8a44dd1c74ae49c20a7cd451974e.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/d18c02628675d0a2c816449d98bda930.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/97e794c86028c5f5b5461ae5ef440a4c.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/3c6cafce68eb941a00f1998f1d3d3aa6.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/9b8a8a44dd1c74ae49c20a7cd451974e.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/d18c02628675d0a2c816449d98bda930.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/97e794c86028c5f5b5461ae5ef440a4c.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/3c6cafce68eb941a00f1998f1d3d3aa6.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/9b8a8a44dd1c74ae49c20a7cd451974e.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/d18c02628675d0a2c816449d98bda930.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/ecedf933ec37d714bd4c2545da43add2.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/8f1ba5b45633e9678d1db480c16cae3f.gif)
一种对付IE和DOM中的event对象之间区别的最佳手段是,调整它们使之尽可能地表现相似,因为更多的浏览器使用的是DOM的事件类型,所以将IE的事件模型调整为接近于DOM事件模型就可以了。
根据DOM属性/方法与IE属性/方法的不同,最后可得出如下的格式化event对象函数,如下所示:4. 获取事件对象
![](https://i-blog.csdnimg.cn/blog_migrate/1fa987a29c6482f53d401256f96355eb.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/ca75c07623e1b494fee67e8f316fc310.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/9b8a8a44dd1c74ae49c20a7cd451974e.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/97e794c86028c5f5b5461ae5ef440a4c.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/3c6cafce68eb941a00f1998f1d3d3aa6.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/9b8a8a44dd1c74ae49c20a7cd451974e.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/d18c02628675d0a2c816449d98bda930.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/d18c02628675d0a2c816449d98bda930.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/d18c02628675d0a2c816449d98bda930.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/d18c02628675d0a2c816449d98bda930.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/d18c02628675d0a2c816449d98bda930.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/97e794c86028c5f5b5461ae5ef440a4c.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/3c6cafce68eb941a00f1998f1d3d3aa6.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/9b8a8a44dd1c74ae49c20a7cd451974e.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/d18c02628675d0a2c816449d98bda930.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/ecedf933ec37d714bd4c2545da43add2.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/d18c02628675d0a2c816449d98bda930.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/97e794c86028c5f5b5461ae5ef440a4c.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/3c6cafce68eb941a00f1998f1d3d3aa6.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/9b8a8a44dd1c74ae49c20a7cd451974e.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/d18c02628675d0a2c816449d98bda930.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/97e794c86028c5f5b5461ae5ef440a4c.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/3c6cafce68eb941a00f1998f1d3d3aa6.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/9b8a8a44dd1c74ae49c20a7cd451974e.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/d18c02628675d0a2c816449d98bda930.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/ecedf933ec37d714bd4c2545da43add2.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/97e794c86028c5f5b5461ae5ef440a4c.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/3c6cafce68eb941a00f1998f1d3d3aa6.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/9b8a8a44dd1c74ae49c20a7cd451974e.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/d18c02628675d0a2c816449d98bda930.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/ecedf933ec37d714bd4c2545da43add2.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/d18c02628675d0a2c816449d98bda930.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/d18c02628675d0a2c816449d98bda930.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/ecedf933ec37d714bd4c2545da43add2.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/d18c02628675d0a2c816449d98bda930.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/8f1ba5b45633e9678d1db480c16cae3f.gif)
IE和DOM使用不同的方法来获取event对象。在IE中,event对象是与window对象相关的,而在DOM中,它独立于任何其他对象,并且是作为参数传递的。下面我们编写一个通用的获取event对象的函数,代码如下: 调用举例如下:七. 小结
![](https://i-blog.csdnimg.cn/blog_migrate/1fa987a29c6482f53d401256f96355eb.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/ca75c07623e1b494fee67e8f316fc310.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/9b8a8a44dd1c74ae49c20a7cd451974e.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/97e794c86028c5f5b5461ae5ef440a4c.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/3c6cafce68eb941a00f1998f1d3d3aa6.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/9b8a8a44dd1c74ae49c20a7cd451974e.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/d18c02628675d0a2c816449d98bda930.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/97e794c86028c5f5b5461ae5ef440a4c.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/3c6cafce68eb941a00f1998f1d3d3aa6.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/9b8a8a44dd1c74ae49c20a7cd451974e.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/d18c02628675d0a2c816449d98bda930.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/ecedf933ec37d714bd4c2545da43add2.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/8f1ba5b45633e9678d1db480c16cae3f.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/1fa987a29c6482f53d401256f96355eb.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/ca75c07623e1b494fee67e8f316fc310.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/9b8a8a44dd1c74ae49c20a7cd451974e.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/d18c02628675d0a2c816449d98bda930.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/8f1ba5b45633e9678d1db480c16cae3f.gif)
本章详细介绍了JavaScript中事件、事件流的概念,详细研究了event对象,最后一节还创建了一个跨浏览器事件库,可使用同一套方法来访问事件对象,添加/删除事件处理函数,而无需考虑浏览器检测的问题。