DOM属性用法速查手册

--------------------------------------------------------------------------------

object　返回包含的对象。　
offscreenBuffering　设置或获取对象在对用户可见之前是否要先在屏幕外绘制。　
offsetHeight　获取对象相对于版面或由父坐标　offsetParent　属性指定的父坐标的高度。　
offsetLeft　获取对象相对于版面或由　offsetParent　属性指定的父坐标的计算左侧位置。　
offsetParent　获取定义对象　offsetTop　和　offsetLeft　属性的容器对象的引用。　
offsetTop　获取对象相对于版面或由　offsetTop　属性指定的父坐标的计算顶端位置。　
offsetWidth　获取对象相对于版面或由父坐标　offsetParent　属性指定的父坐标的宽度。　
offsetX　设置或获取鼠标指针位置相对于触发事件的对象的　x　坐标。　
offsetY　设置或获取鼠标指针位置相对于触发事件的对象的　y　坐标。　
onLine　获取表明系统是否处于全局脱机模式的值。　
opener　设置或获取创建当前窗口的窗口的引用。　
outerHTML　设置或获取对象及其内容的　HTML　形式。　
outerText　设置或获取对象的文本。　
overflow　设置或获取表明当内容超出对象高度或宽度时如何管理对象内容的值。　
overflowX　设置或获取当内容超出对象宽度时如何管理对象内容。　
overflowY　设置或获取当内容超出对象高度时如何管理对象内容。　
ownerDocument　设置或获取结点关联的　document　对象。　
owningElement　获取　HTML　层次中的下个对象。　
padding　设置或获取要在对象和其边距或若存在的边框的话就是对象和其边框之间要插入的全部空间。　
paddingBottom　设置或获取要在对象下边框和内容之间插入的空间总量。　
paddingLeft　设置或获取要在对象左边框和内容之间插入的空间总量。　
paddingRight　设置或获取要在对象右边框和内容之间插入的空间总量。　
paddingTop　设置或获取对象上边框和内容之间插入的空间总量。　
pageBreakAfter　设置或获取表明对象后发生换页的字符串。　
pageBreakBefore　设置或获取表明对象前发生换页的字符串。　
palette　获取用于嵌入文档的调色板。　
parent　获取对象层次中的父窗口。　
parentElement　获取对象层次中的父对象。　
parentNode　获取文档层次中的父对象。　
parentStyleSheet　获取导入到当前样式表的样式表。　
parentTextEdit　获取文档层次中可用于创建包含原始对象的　TextRange　的容器对象。　
parentWindow　获取容器对象所在窗口的引用。　
pathname　设置或获取对象指定的文件名或路径。　
pixelBottom　设置或获取对象的下方位置。　
pixelHeight　设置或获取对象的高度。　
pixelLeft　设置或获取对象的左侧位置。　
pixelRight　设置或获取对象的右侧位置。　
pixelTop　设置或获取对象的上方位置。　
pixelWidth　设置或获取对象的宽度。　
platform　获取用户的操作系统名称。　
pluginspage　获取用于查看嵌入文档的插件　URL。　
port　设置或获取与　URL　关联的端口号码。　
posBottom　设置或获取以　bottom　标签属性指定的单位的对象下方位置。　
posHeight　设置或获取以　height　标签属性指定的单位的对象高度。　
position　设置或获取对象所使用的定位方式。　
posLeft　设置或获取以　left　标签属性指定的单位的对象左侧位置。　
posRight　设置或获取以　right　标签属性指定的单位的对象右侧位置。　
posTop　设置或获取以　top　标签属性指定的单位的对象上方位置。　
posWidth　设置或获取以　width　标签属性指定的单位的对象宽度。　
previousSibling　获取对此对象的上一个兄弟对象的引用。　
profile　设置或获取对象的属性和及这些属性的合法值所定义的一个或多个　URI。　
propertyName　设置或获取对象上发生更改的属性名称。　
protocol　设置或获取　URL　的协议部分。　
pseudoClass　获取标识　@page　规则应用到的页面的伪类的字符串。　
qualifier　设置或获取由数据源对象提供的数据成员的名称。　
readOnly　获取规则或样式表是定义在页面上还是导入的。　
readOnly　设置或获取表明对象内容是否为只读的值。　
readyState　获取对象的当前状态。　
readyState　获取对象的当前状态。　
readyState　获取对象的当前状态。　
reason　设置或获取数据源对象的数据传输结果。　
recordNumber　获取数据集中生成对象的原始记录。　
recordset　从数据源对象设置或获取对缺省数据集的引用。　
referrer　获取将用户引入当前页面的位置　URL。　
rel　设置或获取对象和链接目的的关系。　
repeat　获取　onkeydown　事件是否正在重复。　
returnValue　设置或获取从模式对话框返回的值。　
returnValue　设置或获取事件的返回值。　
rev　设置或获取对象和链接目的的关系。　
right　设置或获取围绕对象内容的矩形右边坐标。　
right　设置或获取对象相对于文档层次中下个已定位的对象的右边界的位置。　
rightMargin　设置或获取页面的整个主体的右边距，而不是缺省的边距。　
rowIndex　获取对象在表格的　rows　集合中的位置。　
rows　设置或获取对象中包含的水平行数。　
rows　设置或获取对象的框架高度。　
rowSpan　设置或获取单元格要跨越表格的多少行。　
rubyAlign　设置或获取由　rt　对象指定的注音文本的位置。　
rubyOverhang　设置或获取由　rt　对象指定的注音文本的位置。　
rubyPosition　设置或获取由　rt　对象指定的注音文本的位置。　
rules　设置或获取要显示哪些分隔线(内部边框)。　
saveType　当　oncontentsave　触发时获取剪贴板类型。　
scheme　设置或获取用于解释为对象指定的属性值的方案。　
scope　设置或获取对象的信息所应用的标格单元格组。　
scopeName　获取为该元素定义的命名空间。　
screenLeft　获取浏览器客户区左上角相对于屏幕左上角的　x　坐标。　
screenTop　获取浏览器客户区左上角相对于屏幕左上角的　y　坐标。　
screenX　设置或获取获取鼠标指针位置相对于用户屏幕的　x　坐标。　
screenY　设置或获取鼠标指针位置相对于用户屏幕的　y　坐标。　
scroll　设置或获取滚动是否关闭。　
scrollAmount　设置或获取介于每个字幕绘制序列之间的文本滚动像素数。　
scrollbar3dLightColor　设置或获取滚动条上滚动按钮和滚动滑块的左上颜色。　
scrollbarArrowColor　设置或获取滚动箭头标识的颜色。　
scrollbarBaseColor　设置或获取滚动条的主要颜色，其中包含滚动按钮和滚动滑块。　
scrollbarDarkShadowColor　设置或获取滚动条上滑槽的颜色。　
scrollbarFaceColor　设置或获取滚动条和滚动条的滚动箭头的颜色。　
scrollbarHighlightColor　设置或获取滚动框和滚动条滚动箭头的左上边缘颜色。　
scrollbarShadowColor　设置或获取滚动框和滚动条滚动箭头的右下边缘颜色。　
scrollbarTrackColor　设置或获取滚动条轨迹元素的颜色。　
scrollDelay　设置或获取字幕滚动的速度。　
scrollHeight　获取对象的滚动高度。　
scrolling　设置或获取框架是否可被滚动。　
scrollLeft　设置或获取位于对象左边界和窗口中目前可见内容的最左端之间的距离。　
scrollTop　设置或获取位于对象最顶端和窗口中可见内容的最顶端之间的距离。　
scrollWidth　获取对象的滚动宽度。　
search　设置或获取　href　属性中跟在问号后面的部分。　
sectionRowIndex　获取对象位于　tBody,　tHead,　tFoot　或　rows　集合中的位置。　
SECURITY　获取表明　frame　或　iframe　的源文件是否应用了特定的安全限制的值。　
selected　设置或获取列表框中的选项是否为缺省项目。　
selectedIndex　设置或获取选中选项位于　select　对象中的位置。　
selector　获取标识　@page　规则应用到的页的字符串。　
selectorText　获取标识相应的样式表规则应用到的元素的字符串。　
self　获取对当前窗口或框架的引用。　
shape　设置或获取对象的形状。　
shiftKey　设置或获取　Shift　键的状态。　
shiftLeft　设置或获取左　Shift　键的状态。　
size　设置或获取该对象的字体大小。　
size　设置或获取　hr　对象的高度。　
size　设置或获取控件的大小。　
size　设置或获取列表中的行数。　
sourceIndex　获取对象在源序中的依次位置，即对象出现在　document　的　all　集合中的顺序。　
span　设置或获取组中的列数。　
specified　获取是否指定了该属性。　
src　设置或获取要播放的声音的　URL。　
src　获取包含有源代码或数据的外部文件的　URL。　
src　设置或获取要由对象装入的　URL。　
srcElement　设置或获取触发事件的对象。　
srcFilter　设置或获取触发　onfilterchange　事件的滤镜对象。　
srcUrn　获取触发事件的行为的统一资源名称(URN)。　
standby　设置或获取可用于实现对象的你自己的　standby　功能的字符串。　
start　设置或获取编号列表的起始编号。　
start　设置或获取视频剪辑文件应该开始播放的时间。　
status　设置或获取位于窗口底部状态栏的信息。　
status　设置或获取表明控件是否选中的值。　
STYLE　为该设置元素设置内嵌样式。　
styleFloat　设置或获取文本要绕排到对象的哪一侧。　
summary　设置或获取对象的描述和/或结构。　
systemLanguage　获取操作系统适用的缺省语言。　
tabIndex　设置或获取定义对象的　Tab　顺序的索引。　
tableLayout　设置或获取表明表格布局是否固定的字符串。　
tabStop　设置或获取元素行为是否可收到焦点并参与　Tab　序列。　
tagName　获取对象的标签名称。　
tagUrn　设置或获取在命名空间声明中指定的统一资源名称(URN)。　
target　设置或获取目标内容要显示于哪个窗口或框架。　
text　设置或获取范围内包含的文本。　
text　设置或获取文档主体的文本(前景)颜色。　
text　设置或获取对象文本的字符串形式。　
text　设置或获取由　option　标签指定的字符串。　
textAlign　设置或获取对象中的文本是左对齐、右对齐、居中对齐还是两端对齐。　
textAlignLast　设置或获取如何排列对象的最后一行或仅有的一行。　
textAutospace　设置或获取自动留空和文本的窄空间宽度调整。　
textDecoration　设置或获取对象中的文本是否有闪烁、删除线、上划线或下划线的样式。　
textDecorationBlink　设置或获取表明对象的　textDecoration　属性是否含有有“blink”的　Boolean　值。　
textDecorationLineThrough　设置或获取表明对象内的文本是否有删除线的　Boolean　值。　
textDecorationNone　设置或获取表明对象的　textDecoration　属性是否设置为　none　的　Boolean　值。　
textDecorationOverline　设置或获取表明对象中的文本是否有上划线的　Boolean　值。　
textDecorationUnderline　设置或获取对象中的文本是否有下划线的　Boolean　值。　
textIndent　设置或获取对象中文本的缩进。　
textJustify　设置或获取对象内的文本所使用的对齐类型。　
textKashidaSpace　设置或获取对象内文本对齐行时所使用空白扩展的　kashida　扩展的倍率。　
textOverflow　设置或获取表明是否显示省略号以表明文本溢出的值。　
textTransform　设置或获取对象中文本的渲染方式。　
textUnderlinePosition　设置或获取对象的　textDecoration　属性中设置的下划线的位置。　
tFoot　获取表格的　tFoot　对象。　
tHead　获取表格的　tHead　对象。　
title　设置或获取样式表的标题。　
title　设置或获取对象的咨询信息(工具提示)。　
toElement　设置或获取用户要将鼠标指针移动指向的对象的引用。　
top　设置或获取对象相对于文档层次中下个定位对象的上边界的位置。　
top　获取最顶层的祖先窗口。　
top　设置或获取围绕对象内容的矩形上边坐标。　
topMargin　设置或获取页面的上边距。　
trueSpeed　设置或获取字幕的位置是否使用　scrollDelay　和　scrollAmount　属性计算，已过的实际时间来自于时钟计时。　
type　设置或获取列表的样式。　
type　获取选中区的类型。　
type　获取样式表编写所用的样式表(CSS)语言。　
type　获取按钮的分类和缺省行为。　
type　从　event　对象中获取事件名称。　
type　设置或获取对象的　MIME　类型。　
type　获取样式表编写所用的样式表(CSS)语言。　
type　获取或初始设置对象所代表的　input　控件类型。　
type　设置或获取关联的脚本引擎的　MIME　类型。　
type　根据　MULTIPLE　属性的值获取　select　控件的类型。　
type　获取控件类型。　
type　设置或获取　value　标签属性指明的资源内容类型。　
typeDetail　获取选中区类型的名称。　
unicodeBidi　设置或获取关于双向法则的嵌入级别。　
uniqueID　获取为对象自动生成的唯一标识符。　
units　设置或获取　embed　对象的高度和宽度单位。　
UNSELECTABLE　指定该元素不可被选中。　
updateInterval　设置或获取屏幕的更新间隔。　
URL　设置或获取当前文档的　URL。　
URLUnencoded　获取文档的　URL，去除所有字符编码。　
urn　设置或获取目标文档的　URN。　
useMap　设置或获取用于客户端图像映射的　URL，通常带有一个书签扩展(#name)。　
userAgent　获取等同于　HTTP　用户代理请求头的字符串。　
userLanguage　获取操作系统的自然语言设置。　
vAlign　设置或获取标题是表格的上面还是下面。　
vAlign　设置或获取文本和其它内容在对象内的垂直方向上如何排列。　
value　获取或设置　textArea　元素字段中的文本。　
value　获取控件的缺省或选中值。　
value　设置或获取列表项目的值。　
value　设置或获取当表单控件提交时返回给服务器的值。　
value　设置或获取控件对象的显示值。当控件对象提交时此值将返回给服务器。　
value　设置或获取元素的输入参数值。　
value　当文本通过用户输入设置后获取　input　对象的文件名。　
value　设置或获取对象的值。　
valueType　设置或获取　value　标签属性的数据类型。　
vcard_name　设置或获取对象的　vCard　值，以便用于自动完成框。　
version　设置或获取管理当前文档的文档类型定义(DTD)版本。　
verticalAlign　设置或获取对象的垂直排列。　
viewInheritStyle　设置或获取表明文档片段是否继承主文档中设置的　CSS　样式的值。　
viewLink　设置或获取给主元素提供内容的　document　对象。　
viewMasterTab　设置或获取表明　viewlink　的主元素是否包含在主文档的　Tab　序列中的值。　
visibility　设置或获取对象的内容是否显示。　
vLink　设置或获取对象中已访问链接的颜色。　
vlinkColor　设置或获取用户已访问过的链接颜色。　
volume　设置或获取声音的音量设置。　
vspace　设置或获取对象的垂直边距。　
wheelDelta　设置或获取滚轮按钮滚动的距离和方向。　
whiteSpace　设置或获取对象中是否自动换行。　
width　获取屏幕的垂直分辨率。　
width　设置或获取对象的计算宽度。　
width　设置或获取对象的宽度。　
width　设置或获取对象的宽度。　
width　设置或获取可用于实现对象的你自己的　width　功能的字符串。　
wordBreak　设置或获取单词内的换行行为，特别是对象中出现多语言的情况。　
wordSpacing　设置或获取对象中单词间的附加空间总量。　
wordWrap　设置或获取当内容超过其容器边界时是否断词。　
wrap　设置或获取如何处理对象中的自动换行。　
writingMode　设置或获取对象内容的方向和绕排。　
x　设置或获取鼠标指针位置相对于父文档的　x　像素坐标。　
XMLDocument　获取对由对象引出的的　XML　文档对象模型(DOM)的引用。　
XMLNS　声明　HTML　文档中自定义标签的命名空间。　
XSLDocument　获取对　XSL　文档的顶层结点的引用。　
y　设置或获取鼠标指针位置相对于父文档的　y　像素坐标。　
zIndex　设置或获取定位对象的堆叠次序。　
zoom　设置或获取对象的放大比例

而在 W3C 的標準中，建議使用 getElementById 來取得某特定 ID 的元素；另外也可以用 getElementsByName 或是 getElementsByTagName 來取得某特定 Name 或是類型的元素集合。

getElementById(elementId)

在 HTML 中，每個元素都可以有自己專屬的 ID 。 在 HTML 中要使用 id 屬性來指定 ID ，且在 HTML 中是不能有元素使用同一個 ID 的，但是可以不使用 ID 。所以在上面的範例中，我們可以用 document.getElementById("text1") 來取得 ID 為 text1 的元素。

getElementsByName(elementName)

若用 document.getElementsByName 的話，則可以取得所有某特定 Name 的元素集合。回傳的元素集合是一個陣列。所以在上面的範例中，我們可以用 document.getElementsByName("text1") 來取得 Name 為 text1 的元素集合，而在元素集合中的第一個元素則是 document.getElementsByName("text1")[0] 。

註： getElementsByName 在 DOM Level 3 中已經被拿掉了。

getElementsByTagName(tagName)

若用 document.getElementsByTagName 的話，則可以取得所有某特定類型的元素集合。回傳的元素集合是一個陣列。所以在上面的範例中，我們可以用 document.getElementsByTagName("input") 來取得類型為 input 的元素集合，而在元素集合中的第一個元素則是 document.getElementsByTagName("input")[0] 。

總結：所以像 document.all 這種非標準的語法就別再使用了，請改用 document.getElementById(elementId) 。

另外要注意的是，除了 getElementsByName 跟 getElementsByTagName 中都有一個 s ，而 getElementById 則沒有喔！你就把它想成是因為 getElementById 只是取得單一元素，而 getElementsByName 跟 getElementsByTagName 都是取得元素集合，所以是複數型態就要加 s 囉。

且 getElementsByName 跟 getElementsByTagName 一定會回傳一個元素集合的陣列，即使符合該條件的元素只有一個。

这三个事件模型分别和下面的文档对象模型（Document Object Model，即 DOM）三巨头结盟：Netscape Navigator 4 (NN4)，Macintosh 和 Windows 系统的 Internet Explorer 4 及其更新版本(IE4+)，以及在 Safari 中得到实现的 W3C DOM。尽管这些模型之间有些地方存在一些本质的差别，但是在一些简易的 JavaScript 的帮助下，它们都可以同时适用于同一个文档。本文主要着眼于相互冲突的事件模型中的两个关键方面：

• 把一个事件和 HTML 元素绑定起来的方法。
• 在事件被触发后如何对之进行处理。

事件绑定的方法

事件绑定是指构造一个响应系统或者用户动作的 HTML 元素的过程。在不同的浏览器版本中，有不少于五种事件绑定技术。下面我们快速地介绍一下这些技术。

事件绑定方法I：绑定元素属性

最简单和向后兼容性最好的事件绑定方法是把事件绑定到元素标识的属性。事件属性名称由事件类型外加一个“on”前缀构成。尽管HTML属性并不是大小写敏感的，人们还是定义了一个规则，规定事件类型的每一个“词”的首字母大写，比如 onClick 和 onMouseOver。这些属性也被称为事件处理器，因为它们指示了元素如何“处理”特定的事件类型。

正确的事件处理器属性的值在形式上是被引号包含的 JavaScript 语句。最常见的值是一条调用某个脚本函数的语句，而被调用的函数在位于文档前部的 <SCRIPT> 标识中定义--该标识通常位于 <HEAD> 部分。举例来说，下面的函数：

				function myFunc() {
    // script statements here
}
		

可以被定义为一个按键控件的事件处理器，按键的定义如下：

				<INPUT TYPE="button" NAME="myButton" VALUE="Click Here" 
onClick="myFunc()">
		

把事件绑定到元素属性上有一个优点，即可以支持开发者把参数传递给事件处理器函数。接收事件的元素的引用则由一个特殊的参数值--this 关键字来传递。下面的代码演示一个函数如何借助传入参数，把任意数目的文本框的内容转化为大写：

				<SCRIPT LANGUAGE="JavaScript">
function convertToUpper(textbox) {
    textbox.value = textbox.value.toUpperCase();
}
</SCRIPT>
...
<FORM ....>
<INPUT TYPE="text" NAME="first_name" onChange="convertToUpper(this)"&gt
<INPUT TYPE="text" NAME="last_name" onChange="convertToUpper(this)"&gt
...
</FORM>
		

事件绑定方法II：绑定对象属性

对于 NN3+ 和 IE4+ 这两类浏览器，脚本编程人员可以以脚本语句的方式把事件绑定到对象上，而不是绑定到元素标识的属性上。每一个负责事件响应的元素对象都为自己能够识别的事件设置了相应的属性。对象属性名称是元素标识属性的小写形式，比如 onmouseover。NN4 还接受 interCap（即首字小写，之后的每一个词的首字大写）版本的属性名，但是考虑到跨浏览器的兼容性，所有字母都是小写的名称会更安全一些。

当您把一个函数的引用赋值给一个事件属性的时候，就发生了绑定。函数的引用是指函数的名称，但是不带函数定义中的括号。因此，如果要为一个名为 myButton 的按键的点击事件（click）进行绑定，使之激活一个定义为 myFunc() 的函数，则其赋值语句如下所示：

				document.forms[0].myButton.onclick = myFunc;
		

您应该注意一点：在事件触发的时候，没有办法向事件函数传递参数。本文在稍候对事件处理过程的讨论中还会回顾这个问题。

事件绑定方法III: 绑定 IE4+<SCRIPT FOR> 标识

在 IE4+ 中，Microsoft 对 <SCRIPT> 标识实现了自己的扩展，可以将它包含的脚本语句和某个元素的一个事件类型进行绑定。支持这个绑定的标识属性（还没有被 W3C 批准为 HTML 的一部分）是 FOR 和 EVENT。

FOR 属性的值必须是您为元素的 ID 属性分配的唯一标识符。然后，您必须把事件的名称（onmouseover，onclick，等等）分配给 EVENT 属性。在上面的按键实例的基础上，我们必须对按键标识进行修改，使之包含一个 ID 属性：

				<INPUT TYPE="button" NAME="myButton" ID="button1" VALUE="Click Here">
		

脚本语句并不在函数中，而是在 <SCRIPT> 标识中，如下所示：

				<SCRIPT FOR="button1" EVENT="onclick">
// script statements here
</SCRIPT>
		

当然，标识中的语句可以调用页面上其它地方定义的任何函数（或者从.js文件中导入的函数）。然而，这种绑定方式意味着您必须为每一个元素和每一个事件创建一个 <SCRIPT FOR> 标识。

您还必须小心，只能把这种绑定方法部署在仅供 IE4+ 浏览器浏览的页面。其它任何支持脚本编程而又没有实现这个特殊的 <SCRIPT> 标识的浏览器（包括 IE3），都将把它作为常规的 <SCRIPT> 标识来处理，并试图在页面装载的时候执行这些脚本语句--这不可避免地引起脚本错误。

事件绑定方法IV：使用 IE5/Windows 的 attachEvent() 方法

早在 W3C DOM 工作组磨砺出标准的事件模型之前，attachEvent() 方法已经被实现了，并且可被用于 Windows 版的 IE5 或更新版本的浏览器上的每一个 HTML 元素。

attachEvent() 方法的用法如下所示：

				
						elemObject.attachEvent("eventName", functionReference);
		

eventName 参数的值是表示事件名称的字符串，比如 onmousedown。functionReference 参数是一个不带括号的函数引用，和早些时候描述的事件属性方法中一样。因此对于上面例子的按键对象，可以通过如下的脚本语句把函数绑定到按键的 click 事件：

				document.getElementById("button1").attachEvent("onclick", myFunc);
		

由于 attachEvent() 方法必须严格工作在 IE5+/Windows 的环境中，所以您既可以使用 W3C DOM 的元素引用方式（如上文所示），也可以使用 IE4+ 的引用方式：

				document.all.button1.attachEvent("onclick", myFunc);
		

这个方法有一个值得注意的地方：您不能在元素被载入浏览器之前执行这个语句。该对象的引用在相应的 HTML 按键元素被浏览器创建之前，都是无效的。因此，要让这样的绑定语句或者在页面的底部运行，或者在 BODY 元素的 onLoad 事件处理器调用的函数中运行。

事件绑定方法V：使用 W3C DOM 的 addEventListener() 方法

Safari 使用的是 W3C DOM 级别2定义的事件绑定机制，这个机制和 IE5/Windows 的 attachEvent() 方法很类似，但是有自己的语法。W3C DOM 规范为 DOM 层次中的每一个结点都定义了一个 addEventListener() 方法。HTML 元素是 DOM 结点中的一类，在一对元素标识内部的文本结点也是一个结点，也能够接收事件。这一点在 NN6 事件处理过程中经常得到体现，在本文的后面部分您将会看到。

addEventListener() 方法的语法如下所示：

				
						nodeReference.addEventListener("eventType", listenerReference, captureFlag);
		

用 W3C DOM 规范中的行话来说，addEventListener() 方法为指定的结点注册了一个事件，表示该结点希望处理相应的事件。这个方法的第一个参数是一个声明事件类型的字符串（不带"on"前缀），比如 click，mousedown，和 keypress。addEventListener() 方法的第二个参数可以和早些时候描述过的函数引用同样对待。第三个参数则是一个 Boolean 值，指明该结点是否以DOM中所谓的捕捉模式来侦听事件。事件的捕捉和派发---综合起来称为事件的传播--最后由另一篇文章来描述。对于一个典型的事件侦听器来说，第三个参数应该为 false（假）。

那种绑定方法最好？

如果您足够幸运，只需要为某一个操作系统上特定版本的浏览器创建应用程序，则可以为选定的浏览器选择最现代的绑定方式。但是对于跨浏览器的网站作者来说，选择绑定方法则需要面对实质性的挑战。

如果您只计划支持 IE5/Mac，则可以不考虑 attachEvent() 和 addEventListener() 方法，因为 IE5/Mac 对这两种方法都不支持。这种情况下，比较实际的选择有两种，要么绑定标识属性，要么绑定对象属性。这时就需要费心思了。

一方面，W3C DOM Level 2 承认基于标识属性的方法，并将它推荐为 addEventListener() 方法的可接受代替方法。为了和数以百万计的脚本相兼容，所有支持脚本编程的浏览器都支持基于标识属性的事件绑定方法。一些自动化的页面制作工具，比如 DreamWeaver，也把事件处理器的属性嵌入到 HTML 标识中。

但是另一方面，在元素标识文件中嵌入面向脚本的信息，又不能将内容从风格及行为中分离开来，这和当前的流行趋势相违背。把事件绑定到对象属性上的方法听起来方向是对的，但是在 W3C 关于 HTML，XHTML，或者 DOM 的标准中，并没有对事件属性提供“官方”的支持。尽管如此，在实际生活中，除了第一代支持脚本编程的浏览器之外，其它浏览器都支持这种方法。

一个纯标准论者会认为上述的两种方法都有缺点，但是对于讲究实际的开发者来说，即使考虑到未来主流浏览器的兼容性，这两种方法都是“安全”的。

事件的信息矿：事件对象

所有这三种事件模型的核心都是一个事件对象--它是一个抽象的实体，其属性中包含很多对事件处理函数具有潜在价值的信息。从本文早些时候对事件绑定技术的讨论中，您可能可以推断出事件对象对脚本之所以至关重要，原因之一是除了基于标识属性的绑定方法以外，其它绑定方法都不支持将参数传递到事件处理函数中。

事件对象通过提供足够的“挂钩”，使事件处理函数可以读取事件的特征，从而填补了这个缝隙。因此，事件处理函数可以得到接收事件的元素的引用，以及其它一些有用的信息，比如鼠标动作的坐标，鼠标使用的按键，键盘上被按压的键，以及在事件发生的过程中是否有修饰键被按下（比如检测 Shift-click 事件）。

访问事件对象

虽然事件对象的精确构成因为本文讨论的三种 DOM（NN4，IE4+，以及 W3C/Safari）的不同而有所变化，但是，一个事件处理函数只能通过以下两种方式之一来访问事件对象：NN 方式和 IE 方式。W3C/Safari DOM 事件对象公布给脚本的接口方式和 NN4 的事件对象一样；而 IE4+ 则有自己的方法。

IE4+ 的事件对象更加易于描述，因此我们首先对它进行讨论。简单地说，事件对象是 window 对象的一个属性。这意味着在所有的实例中只有一个事件对象。举例来说，在键盘上简单地按压和松开一个按键，会产生三个事件：onKeyDown，onKeyPress，和 onKeyUp（事件的发生顺序和这里的列举顺序相同）。如果 onKeyDown事 件激活的函数花费很长的时间进行处理，则浏览器就会把其它两个事件保持在队列中，直到 onMouseDown 事件处理完成为止。

而对于 NN4 和 W3C DOM 来说，事件对象看起来就更加抽象一些。除了基于标识属性风格的绑定方法之外，其它绑定方法都是把事件对象自动传递给与事件相绑定的函数。传递给函数的是一个单一的参数。开发者需要在函数中定义一个参数变量，来“接收”该参数的值。为了避免和IE中的 window.event 对象互相冲突，请不要把参数命名为 event。举例来说，把它命名为 evt 就相当好，相应的事件函数的定义大致如下：

				function myFunc(evt) {
    // script statements here
}
		

然而，如果您使用的是基于标识属性的事件绑定技术，就必须显式地把事件作为一个参数传递到您调用的函数。为了完成事件的传递，需要把 event 这个关键字作为参数进行传递：

				onClick = "myFunc(event)"
		

外部传入的参数是您的事件处理函数和 NN 的事件对象之间的唯一联系纽带。如果在主事件处理函数内部调用的其它函数需要该对象或者该对象的属性值，则您可以把该对象或其属性值作为参数中继给这些函数。

如果您想知道 IE 是否把事件的引用保存在 window.event 属性中，那答案是“是”。使用这个语法交集是相当安全的，因为在 NN 和 IE 这两个浏览器，被传递到事件处理函数的事件对象都有您所期望的当前事件的属性值。

兼容两种事件对象引用

设想在处理事件时，我们需要在一个事件函数中考察一个或者多个事件属性。这是一个简单的技术，可以使事件处理函数和作为参数传入的事件对象协同工作，或者从 window.event 属性中读取信息。而且，这个技术不必处理不同的浏览器版本之间的细微差别。

在开始的时候，需要在您的事件处理函数中定义一个参数变量，准备接收可能传入的事件对象。然后，通过简单的条件表达式把浏览器的事件对象赋值给上述的参数变量：

				function myFunc(evt) {
    evt = (evt) ? evt : ((window.event) ? window.event : "")
    // process event here
}
		

如果事件对象真的以参数的形式传进来了，则在函数内部，事件对象就被保留在 evt 这个局部变量中。如果这个参数是 null，而且浏览器的 window 对象包含有一个 event 属性，则 window.event 对象就会把自己赋值给 evt 变量。

然而，为了完成这个工作，还应该再包含一层或者多层条件控制，以便优雅地适应那些在事件模型中没有定义事件对象的的早期浏览器：

				function myFunc(evt) {
    evt = (evt) ? evt : ((window.event) ? window.event : "")
    if (evt) {
        // process event here
    }
}
		

为了把同样的方式应用到所有事件处理函数的构建中，您可以定义一个函数来兼容两种事件，即由绑定的标识属性显式传入的事件对象，以及由绑定的事件属性隐式传入的事件对象。这样即使您在开发过程中改变了事件绑定的风格，这个函数也不必改变。

瑞典自助餐式地选择事件对象

然而，建立一个指向事件对象的引用只是战斗的一部分。来自不同事件模型的每一个事件对象都拥有自己的一套属性，以容纳事件的细节。下面的表格列出了最常用的属性，以及这些属性在上述三种事件对象类型中的名称。

表格 1. 流行的事件对象属性

标注*的属性值可以通过对 event.clientX + document.body.scrollTop 或者 event.clientY + document.body.scrollTop 进行求值来得到。

Macintosh 版本的IE5在通常情况下都遵循 IE4+ 的事件对象模型，但是有一个例外，即 IE5/Mac 的事件对象既定义了 srcElement 属性，也定义了 target 属性，这两个属性都指向接收事件的元素。

需要抽象的最重要的事件对象属性可能得算指向接收事件的 HTML 元素的引用。NN4 和 W3C 的事件对象采用相同的属性名（target），而 IE4+ 的事件对象则使用 srcElement 属性。这时候，对象检测技术（而不是费力劳神而又具有危险倾向的浏览器版本识别方法）再次拯救了我们。对于那些非文本容器的元素，一个简单的条件表达式就可以轻松处理脚本语法上的差别：

				var elem = (evt.target) ? evt.target : evt.srcElement
		

从现在开始，您的脚本就可以读写任何浏览器对象模型公布出来的元素对象属性了。

W3C DOM结点的事件目标

W3C DOM 的结点架构使得文档中的每一个结点都可以接收事件。在支持这一架构的浏览器中，发生在嵌套文本顶上的事件并不调用分配给文本容器的事件处理器，相应的文本结点才是该事件的目标结点。考虑如下场景：

在事件实例，当鼠标的指针在一个 SPAN 元素包含的文本顶上滚动时，该文本就会被高亮显示。 事件绑定的过程通过对象属性在 init() 函数中进行。从表面上看，当用户在 SPAN 元素顶上滚动鼠标时，onMouseOver 事件动作函数就为该元素指派一个与风格表单规则相关联的类名（highlight），该风格规则把文本的显示风格定义为粗体，黄色背景；而在 onMouseOut 函数中，则把风格恢复为原始的版本（类 normal）。请注意一个 toggleHighlight() 函数是如何在事件对象的 type 属性的帮助下，执行两个动作的（该属性在所有事件模型对象中的名称是相同的）。请试一下这个事件实例。

但是如果您把例子装载到 NN6，则鼠标事件的真正目标就是 SPAN 元素中的文本结点了。本文并不讨论事件的传播机制，但是请相信，W3C DOM 事件模型的缺省行为会使事件沿着结点的包含层次向上传播（和 IE4+ 中事件通过元素容器向上传播的机制很类似）。因此，在这个事件实例中。鼠标事件会从其真正的目标向上传递到文本结点的容器（也就是 SPAN 元素）。这些事件触发了 SPAN 元素中相应的事件处理器。

虽然事件处理器属于 SPAN 元素，事件对象还是保留文本对象的引用，并将它作为事件的原始目标。然而，只有对文本结点的容器进行动作，才能修改它的风格。为了实现 toggleHighlight() 函数的等价操作，使之可以修改SPAN容器的 className 属性，该函数需要派生出一个指向文本结点容器的引用。

一个策略是使用 W3C DOM 事件对象的 currentTarget 属性，该属性返回一个处理事件的结点的引用。脚本中的决策树需要考虑这个属性，增加代码之后的 toggleHighlight() 函数如下所示：

				function toggleHighlight(evt) {
    evt = (evt) ? evt : ((window.event) ? window.event : "")
    if (evt) {
        var elem
        if (evt.target) {
            if (evt.currentTarget && (evt.currentTarget != evt.target)) {
                elem = evt.currentTarget
            } else {
                elem = evt.target
            } 
        } else {
            elem = evt.srcElement
        }
        elem.className = (evt.type == "mouseover") ? "highlight" : "normal"
    }
}
		

另一个可选的方法是考察由 target 属性返回的对象的 ronodeType 属性。一个能够把事件定向给文本结点的浏览器，也可以把一个文本结点的 nodeType 属性值报告为3，而不是报告为元素结点的类型（其值为１）。如果事件的目标是一个文本结点，则脚本程序就可以通过该文本结点的 parentNode 属性来得到其上级元素结点的引用。这种方法的决策树在某种程度上得到更多的改进：

				function toggleHighlight(evt) {
    evt = (evt) ? evt : ((window.event) ? window.event : "")
    if (evt) {
        var elem
        if (evt.target) {
            elem = (evt.target.nodeType == 3) ? evt.target.parentNode : evt.target
        } else {
            elem = evt.srcElement
        }
        elem.className = (evt.type == "mouseover") ? "highlight" : "normal"
    }
}
		

如果您正在用遵循 W3 的浏览器阅读本文，则请尝试这个修改过的版本，看看鼠标滚动时的风格变化。

这个页面使用了嵌入到事件实例中的最新版本的 toggleHighlight() 函数，展示了如何使用 JavaScript 为那些能够显示期望效果的浏览器增加额外的价值，同时也可以那些基本的内容提供给仍然使用着较老版本或者不支持脚本编程的浏览器的用户，只不过在模式上不那么动人和便于交互。

一个事件处理函数的模板

并不是每个事件处理函数都处理页面元素对象中同样的属性或者行为，但是，从上文的讨论可以派生出来的一个模板，您可以在这个模板的帮助下开始编码。模板如下：

				function functionName(evt) {
    evt = (evt) ? evt : ((window.event) ? window.event : "")
    if (evt) {
        var elem
        if (evt.target) {
            elem = (evt.target.nodeType == 3) ? evt.target.parentNode : evt.target
        } else {
            elem = evt.srcElement
        }
        if (elem) {
            // process event here
        }
    }
}
		

请把第一行的函数名替换为您希望的函数名，并在注视指示的地方开始书写具体事件的代码。这个格式应该可以为您提供一个起点，适合于您采用的任何跨浏览器的事件绑定风格。如果您需要在一个页面中多次使用这个格式，则可以进一步精简代码，即把读取目标的代码抽象成一个可重用的工具函数，然后在每一个事件处理函数中进行调用：

				// shared function
function getTargetElement(evt) {
    var elem
    if (evt.target) {
        elem = (evt.target.nodeType == 3) ? evt.target.parentNode : evt.target
    } else {
        elem = evt.srcElement
    }
    return elem

}

function functionName(evt) {
    evt = (evt) ? evt : ((window.event) ? window.event : "")
    if (evt) {
        var elem = getTargetElement(evt)
        if (elem) {
            // process event here
        }
    }
}
		

有了这类框架，您现在应该可以把更多的注意力集中在各个事件处理函数要求的具体动作中了。

查看实例：

• Events Example

下载脚本

• eventsexample.txt