一．今天的事件
事件是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.
var oDiv = document.getElementById(“div1”);
oDiv.onclick = function() {
alert(“I was clicked.”);
}
用这个分配方法，事件处理函数必须小写，才能正确响应事件。
Eg2. <div onclick=”alert(‘I was clicked.’)”></div>
在例二中，事件处理函数的大小写可以任意
1. IE
在IE中，每个元素和window对象都有两个方法：attachEvent()和detachEvent()。attachEvent()用来给一个事件附加事件处理函数。而detachEvent()用来将事件处理函数分离出来。Eg.
var fnClick = function() {
alert(“Clicked!”);
}
var oDiv = 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.
function handleEvent(oEvent) {
if (oEvent.type == “click”) {
alert(“Clicked!”);
} else if (oEvent.type == “mouseover”) {
alert(“mouse over!”);
}
}
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.
<body onresize=”alert(‘Resizing’)”>
最大化或最小化窗口时，也会触发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);
} else if (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);
} else if (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;
} else if (oEvent.type == "mouseover") {
oEvent.relatedTarget = oEvent.fromElement;
}
oEvent.stopPropagation = function() {
this.cancelBubble = true;
};
oEvent.target = oEvent.srcElement;
oEvent.time = (new Date()).getTime();
}
return oEvent;
}
4. 获取事件对象
IE和DOM使用不同的方法来获取event对象。在IE中，event对象是与window对象相关的，而在DOM中，它独立于任何其他对象，并且是作为参数传递的。下面我们编写一个通用的获取event对象的函数，代码如下：
EventUtil.getEvent = function() {
if (window.event) {
return this.formatEvent(window.event);
} else {
return EventUtil.getEvent.caller.arguments[0];
}
}
调用举例如下：
oDiv.onclick = function() {
var oEvent = EventUtil.getEvent();
}
七. 小结
本章详细介绍了JavaScript中事件、事件流的概念，详细研究了event对象，最后一节还创建了一个跨浏览器事件库，可使用同一套方法来访问事件对象，添加/删除事件处理函数，而无需考虑浏览器检测的问题。
另外查看对象的事件可以在 http://www.w3school.com.cn/htmldom/dom_obj_event.asp
分享到：
相关推荐
JavaScript事件是浏览器或Node.js环境中发生的特定行为，如用户点击按钮、页面加载完成或输入框获得焦点等。事件驱动编程是JavaScript的核心特性之一，通过监听和处理这些事件，我们可以创建响应式的用户体验。 二...
在标题提到的"EventDispatcher, js事件派发器, javascript事件派发器"中，我们可以理解这是一个JavaScript实现的事件派发器，可能是作者的原创工作。用户可以通过GitHub上的问题跟踪系统（Issue）报告任何发现的错误...
JavaScript（简称JS）...总的来说，JavaScript事件集合是构建动态和交互式网页的核心工具。通过深入理解和熟练应用事件监听、事件处理、事件冒泡、事件捕获等概念，开发者能够创建出更加丰富、响应迅速的Web应用程序。
实验报告详细介绍了JavaScript事件处理的相关知识，这在Web开发中是非常关键的一部分，因为事件是用户与网页交互的主要方式。以下是对各个知识点的详细说明： 1. **JavaScript事件基本概念**： - **事件**：是用户...
JavaScript 事件机制详细研究 JavaScript 事件机制是指浏览器中发生的各种事件，例如点击、鼠标悬停、键盘输入等，JavaScript 通过捕捉这些事件来执行相应的操作。本文将详细介绍 JavaScript 事件机制的实现方式和...
JS事件触发大全是指在 JavaScript 中各种事件的触发机制，这些事件可以在不同的元素上触发，例如按钮、链接、文本框、图片等。这些事件可以被 JavaScript 代码捕捉和处理，以便执行特定的操作。 事件类型 1. 鼠标...
Js事件大全 1.一般事件... 2 2.页面相关事件... 2 3.表单相关事件... 3 4.滚动字幕事件... 3 5.编辑事件... 3 6.数据绑定... 4
全面，直观javascript的事件
在JavaScript中，监听浏览器窗口关闭事件对于实现特定的用户交互或数据保存功能至关重要。下面将详细介绍几种常用的浏览器关闭事件监听方法。 1. 方式一：适用于IE浏览器，仅在关闭时提示 ```javascript window....
如何给javascript js事件传递参数.zip
在这个"10-JS事件基础"的教程中，我们将深入理解JavaScript中的事件处理机制，包括事件对象、事件冒泡、DOM事件流以及鼠标和键盘事件。 首先，让我们了解一下什么是事件对象。在JavaScript中，每当发生一个事件（如...
JavaScript事件是Web开发中不可或缺的一部分，它允许用户与网页进行交互并响应用户的操作。...在阅读`event.js`这个文件和相关的博客文章后，你将能够深入理解JavaScript事件系统，并将其应用到自己的项目中。
JavaScript事件code对应表是JavaScript编程中非常重要的一个概念，它涉及到浏览器如何处理用户与网页的交互。在网页中，无论是点击按钮、滚动页面还是按下键盘上的键，都会触发各种事件。事件code就是用来识别这些...
通过自定义右键菜单，我们可以提升网页的用户体验，同时这也是一个很好的实践JavaScript事件处理和DOM操作的机会。记得在实际应用中考虑兼容性问题，确保你的代码能在不同的浏览器和设备上正常工作。
JavaScript事件学习小结(五）js中事件类型之鼠标事件 //www.jb51.net/article/86259.htm JavaScript事件学习小结（一）事件流 //www.jb51.net/article/86261.htm javaScript事件学习小结（四）event的公共成员...
jem.js（Javascript 事件管理器） 这是一个 Javascipt 库，可帮助我们编写事件驱动的 Javascript 代码。 没有依赖项，没有 jQuery，没有其他库。 这与 DOM 无关。 jem.js 用于您的自定义事件。 欢迎任何形式的...
eventdispatcher.js, 自定义对象的JavaScript事件 eventdispatcher.js 自定义对象的JavaScript事件用法[removed][removed][removed]
JAVASCRIPT 实现OPTION的事件触发
JavaScript事件监听机制是前端开发中不可或缺的一部分，它用于处理页面元素的各种交互，如点击、鼠标移动等。在本文中，我们将深入探讨事件监听，特别是事件捕获这一概念，以及如何在不同的浏览器环境中实现兼容。 ...
SVG事件和JavaScript事件的结合使得交互式图形成为可能。例如，你可以为SVG元素添加点击事件监听器，当用户点击某个图形时触发特定的JavaScript函数。这可以用于显示详细信息、导航或执行其他操作。SVG事件包括`...