< JavaScript 页面装载之后，运行脚本的唯一方式，就是响应系统或者用户的动作。虽然从第一个支持脚本编程的浏览器面世以来，简单的事件被实现为 Web 有机会被激活，并得以运行。在一个>
< DOM。尽管这些模型之间有些地方存在一些本质的差别，但是在一些简易的 W3C 中得到实现的 Safari 及其更新版本(IE4+)，以及在 Explorer Internet 系统的 Windows 和 (NN4)，Macintosh Navigator DOM）三巨头结盟：Netscape Model，即 Object>
* <
事件绑定的方法
<>
事件绑定方法I：绑定元素属性
onClick 和 onMouseOver。这些属性也被称为事件处理器，因为它们指示了元素如何“处理”特定的事件类型。
< <HEAD> 标识中定义--该标识通常位于 <SCRIPT> 语句。最常见的值是一条调用某个脚本函数的语句，而被调用的函数在位于文档前部的>
< here statements script { myFunc()>
< VALUE="Click Here" TYPE="button">
< CODE>关键字来传递。下面的代码演示一个函数如何借助传入参数，把任意数目的文本框的内容转化为大写：
< < ... > <INPUT ....> <FORM SCRIPT> } textbox.value="textbox.value.toUpperCase();" convertToUpper(textbox) function >>
事件绑定方法II：绑定对象属性
onmouseover。NN4 还接受 interCap（即首字小写，之后的每一个词的首字大写）版本的属性名，但是考虑到跨浏览器的兼容性，所有字母都是小写的名称会更安全一些。
myButton 的按键的点击事件（click）进行绑定，使之激活一个定义为 myFunc() 的函数，则其赋值语句如下所示：
事件绑定方法III: 绑定 IE4+<SCRIPT FOR> 标识
FOR 和 EVENT。
EVENT 属性。在上面的按键实例的基础上，我们必须对按键标识进行修改，使之包含一个 ID 属性：
< VALUE="Click Here" TYPE="button">
<>
< EVENT="onclick" FOR="button1">
< FOR> <SCRIPT>
< IE3），都将把它作为常规的 标识的浏览器（包括 浏览器浏览的页面。其它任何支持脚本编程而又没有实现这个特殊的>
事件绑定方法IV：使用 IE5/Windows 的 attachEvent() 方法
attachEvent() 方法已经被实现了，并且可被用于 Windows 版的 IE5 或更新版本的浏览器上的每一个 HTML 元素。
< CODE>方法的用法如下所示：
eventName", functionReference);
onmousedown。functionReference 参数是一个不带括号的函数引用，和早些时候描述的事件属性方法中一样。因此对于上面例子的按键对象，可以通过如下的脚本语句把函数绑定到按键的 click 事件：
< button1?).attachEvent(?onclick?,>
<>方法必须严格工作在 IE5+/Windows 的环境中，所以您既可以使用 W3C DOM 的元素引用方式（如上文所示），也可以使用 IE4+ 的引用方式：
< onclick?,>
onLoad 事件处理器调用的函数中运行。
事件绑定方法V：使用 W3C DOM 的 addEventListener() 方法
attachEvent() 方法很类似，但是有自己的语法。W3C DOM 规范为 DOM 层次中的每一个结点都定义了一个 addEventListener() 方法。HTML 元素是 DOM 结点中的一类，在一对元素标识内部的文本结点也是一个结点，也能够接收事件。这一点在 NN6 事件处理过程中经常得到体现，在本文的后面部分您将会看到。
<>
eventType", listenerReference, captureFlag);
addEventListener() 方法为指定的结点注册了一个事件，表示该结点希望处理相应的事件。这个方法的第一个参数是一个声明事件类型的字符串（不带"on"前缀），比如 click，mousedown，和 keypress。addEventListener() 方法的第二个参数可以和早些时候描述过的函数引用同样对待。第三个参数则是一个 Boolean 值，指明该结点是否以DOM中所谓的捕捉模式来侦听事件。事件的捕捉和派发---综合起来称为事件的传播--最后由另一篇文章来描述。对于一个典型的事件侦听器来说，第三个参数应该为 false（假）。
那种绑定方法最好？
attachEvent()
和 addEventListener() 方法，因为 IE5/Mac 对这两种方法都不支持。这种情况下，比较实际的选择有两种，要么绑定标识属性，要么绑定对象属性。这时就需要费心思了。
addEventListener() 方法的可接受代替方法。为了和数以百万计的脚本相兼容，所有支持脚本编程的浏览器都支持基于标识属性的事件绑定方法。一些自动化的页面制作工具，比如 DreamWeaver，也把事件处理器的属性嵌入到 HTML 标识中。
事件的信息矿：事件对象
< Shift-click>
访问事件对象
< 的事件对象一样；而 NN4 事件对象公布给脚本的接口方式和 方式。W3C IE 方式和 Safari）的不同而有所变化，但是，一个事件处理函数只能通过以下两种方式之一来访问事件对象：NN DOM（NN4，IE4+，以及>
window 对象的一个属性。这意味着在所有的实例中只有一个事件对象。举例来说，在键盘上简单地按压和松开一个按键，会产生三个事件：onKeyDown，onKeyPress，和 onKeyUp（事件的发生顺序和这里的列举顺序相同）。如果 onKeyDown事 件激活的函数花费很长的时间进行处理，则浏览器就会把其它两个事件保持在队列中，直到 onMouseDown 事件处理完成为止。
window.event 对象互相冲突，请不要把参数命名为 event。举例来说，把它命名为 evt 就相当好，相应的事件函数的定义大致如下：
< here statements script { myFunc(evt)>
event 这个关键字作为参数进行传递：
< SPAN="myFunc(event)">
< NN>
window.event 属性中，那答案是“是”。使用这个语法交集是相当安全的，因为在 NN 和 IE 这两个浏览器，被传递到事件处理函数的事件对象都有您所期望的当前事件的属性值。
兼容两种事件对象引用
window.event 属性中读取信息。而且，这个技术不必处理不同的浏览器版本之间的细微差别。
< here { myFunc(evt) event process ??) : window.event ? ((window.event) evt="(evt)">
evt 这个局部变量中。如果这个参数是 null，而且浏览器的 window 对象包含有一个 event 属性，则 window.event 对象就会把自己赋值给 evt 变量。
< here { } myFunc(evt) event process ??) : window.event ? ((window.event) evt="(evt)" (evt) if>
瑞典自助餐式地选择事件对象
< 1.
或者 event.clientY + document.body.scrollTop 进行求值来得到。
srcElement 属性，也定义了 target 属性，这两个属性都指向接收事件的元素。
target），而 IE4+ 的事件对象则使用 srcElement 属性。这时候，对象检测技术（而不是费力劳神而又具有危险倾向的浏览器版本识别方法）再次拯救了我们。对于那些非文本容器的元素，一个简单的条件表达式就可以轻松处理脚本语法上的差别：
< evt.target elem="(evt.target)">
W3C DOM结点的事件目标
<>
事件实例，当鼠标的指针在一个 SPAN 元素包含的文本顶上滚动时，该文本就会被高亮显示。 事件绑定的过程通过对象属性在 init() 函数中进行。从表面上看，当用户在 SPAN 元素顶上滚动鼠标时，onMouseOver 事件动作函数就为该元素指派一个与风格表单规则相关联的类名（highlight），该风格规则把文本的显示风格定义为粗体，黄色背景；而在 onMouseOut 函数中，则把风格恢复为原始的版本（类 normal）。请注意一个 toggleHighlight() 函数是如何在事件对象的 type 属性的帮助下，执行两个动作的（该属性在所有事件模型对象中的名称是相同的）。请试一下这个事件实例。
< 元素）。这些事件触发了中事件通过元素容器向上传播的机制很类似）。因此，在这个事件实例中。鼠标事件会从其真正的目标向上传递到文本结点的容器（也就是事件模型的缺省行为会使事件沿着结点的包含层次向上传播（和 元素中的文本结点了。本文并不讨论事件的传播机制，但是请相信，W3C NN6，则鼠标事件的真正目标就是>
toggleHighlight() 函数的等价操作，使之可以修改SPAN容器的 className 属性，该函数需要派生出一个指向文本结点容器的引用。
currentTarget 属性，该属性返回一个处理事件的结点的引用。脚本中的决策树需要考虑这个属性，增加代码之后的 toggleHighlight() 函数如下所示：
< { }="=" ??) : window.event ? ((window.event) evt="(evt)" (evt) if elem ?normal? ?highlight? ?mouseover?) elem.className="(evt.type" else !="evt.target))" (evt.currentTarget && (evt.target) var toggleHighlight(evt)>
target 属性返回的对象的 ronodeType 属性。一个能够把事件定向给文本结点的浏览器，也可以把一个文本结点的 nodeType 属性值报告为3，而不是报告为元素结点的类型（其值为１）。如果事件的目标是一个文本结点，则脚本程序就可以通过该文本结点的 parentNode 属性来得到其上级元素结点的引用。这种方法的决策树在某种程度上得到更多的改进：
< { }="=" ??) : window.event ? ((window.event) evt="(evt)" (evt) if evt.target elem ?normal? ?highlight? ?mouseover?) elem.className="(evt.type" else (evt.target) var toggleHighlight(evt) evt.target.parentNode 3)>
尝试这个修改过的版本，看看鼠标滚动时的风格变化。
事件实例中的最新版本的 toggleHighlight() 函数，展示了如何使用 JavaScript 为那些能够显示期望效果的浏览器增加额外的价值，同时也可以那些基本的内容提供给仍然使用着较老版本或者不支持脚本编程的浏览器的用户，只不过在模式上不那么动人和便于交互。
一个事件处理函数的模板
< here { }="=" event process ??) : window.event ? ((window.event) evt="(evt)" (evt) if evt.target elem else (evt.target) var evt.target.parentNode 3) (elem) functionName(evt)>
< here { } function="=" event process ??) : window.event ? ((window.event) evt="(evt)" (evt) if evt.target elem else (evt.target) var evt.target.parentNode 3) (elem) functionName(evt) return getTargetElement(evt) shared>
分享到：
相关推荐
DOM Level 2引入了完整的事件模型，支持捕获和冒泡两种事件流，并且DOM Level 3继续沿用了这个模型。然而，不同的浏览器在实现上存在差异，比如IE有一个专有的事件模型，与DOM标准不同。 在JavaScript中，事件接口...
这些方法允许更灵活地添加、移除和触发事件监听器，同时支持事件冒泡和事件捕获，以及处理多个事件监听器。 4. JavaScript事件流 事件流描述了事件如何在文档结构中传播。主要有三种事件流： - **冒泡流**：事件...
本文主要探讨了JavaScript中的三种事件模型，这些模型与不同的浏览器和DOM版本有关。尽管存在差异，但通过一些兼容性处理，可以确保同一代码在不同浏览器上运行。 首先，Netscape Navigator 4 (NN4) 使用的是早期的...
该模型可以将对象分为核心部分、浏览器对象模型和文档对象模型三个组成部分。核心部分主要包括 JavaScript 的数据类型、运算符、表达式，以及 JavaScript 中的内置的全局对象、全局属性和全局函数等。浏览器对象模型...
事件机制的原理是基于浏览器的事件模型，分为两种：冒泡型和捕获型。冒泡型的事件从最具体的元素开始触发，逐步向上冒泡到最顶层的元素；捕获型的事件从最顶层的元素开始捕获，逐步向下捕获到最具体的元素。 在 ...
JavaScript是一种基于原型的动态类型语言，其对象模型是其核心特性之一。本文将深入探讨JavaScript的对象模型和执行模型，以及它们如何影响代码的运行。 ### JavaScript对象模型 在JavaScript中，对象是由键值对...
本文将详细介绍三种主要的事件模型：原始事件模型、DOM2事件模型以及IE事件模型，并探讨它们的差异和使用方法。 首先，原始事件模型是所有浏览器都支持的基础模型。在此模型中，事件分为“输入事件”（如`onclick`...
在JavaScript中，函数可以同时具备这两种特性，这使得它们非常灵活且强大。 ##### 2. 内置数据类型 JavaScript提供了一系列内置的数据类型，这些类型为开发者提供了丰富的功能： - **Function**: 函数类型的用户...
JavaScript不支持多线程处理，而是采用异步事件模型。这意味着当一个任务在执行时，如果有其他任务需要等待，JavaScript会先执行其他任务，直到触发的事件完成后再回调。例如，如果想要在页面加载完成后改变body的...
DOM事件模型分为三个层次：**事件冒泡（Event Bubbling）**、**事件捕获（Event Capturing）**和**DOM2级事件模型**。事件冒泡是从最深的节点开始，逐级向上层节点传播事件；事件捕获则相反，从最外层节点开始，向下...
javascript Event(事件模型)，针对于javascript事件的处理，具有一些帮助。
JavaScript事件模型是JavaScript编程中非常重要的一个概念，它涉及到网页交互和用户操作的响应机制。在JavaScript中，事件是用户或浏览器对网页进行某种操作时触发的特定行为，例如点击按钮、滚动页面等。理解并掌握...
3. W3C与IE事件模型的融合：现代浏览器普遍支持统一的W3C事件模型，同时为了兼容旧版IE，需要对事件处理进行适配。 二、事件类型 JavaScript中有很多内置事件，例如： - 鼠标事件：click（点击）、mouseover（鼠标...
ASP.NET 事件模型详解 ...我们讨论了 ASP.NET 事件模型的生命周期、OnInit 和 OnLoad 方法的使用，以及 JavaScript 事件模型的三个阶段。希望本文能够帮助读者更好地理解 ASP.NET 和 JavaScript 事件模型的概念。
javascript中有两种事件模型：DOM0，DOM2。而对于这两种的时间模型，我一直不是非常的清楚，现在通过网上查阅资料终于明白了一些。 一. DOM0级事件模型 DOM0级事件模型是早期的事件模型，所有的浏览器都是支持...
在Web开发中，JavaScript事件模型允许开发者定义当特定事件（如点击、鼠标移动、键盘输入等）发生时应执行的代码。 一、事件和事件处理 JavaScript事件是指用户或浏览器执行的任何动作，如点击按钮、滚动页面或填写...
"基于VRML与JavaScript三维模型的交互设计" 本文讨论了基于VRML和JavaScript三维模型的交互设计，旨在解决传统的三维模型展示仅限于360度动态观察的问题。通过使用VRML技术创建的三维模型，可以实现高度真实感的三...
- 对象模型描述了JavaScript对象间的层次结构，提供了一种接口来处理这些对象及其行为。在JavaScript中，对象模型分为核心部分和特定于环境的部分。 - **核心部分** 包括基本数据类型、运算符、表达式，以及全局...
【温故而知新】JavaScript的事件模型