< 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。尽管这些模型之间有些地方存在一些本质的差别，但是在一些简易的 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>
465
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
