HTML DOM参考手册

HTML DOM 事件

HTML DOM - 事件

HTML DOM 允许 JavaScript 对 HTML 事件作出反应。

实例

Mouse Over Me

Click Me

对事件作出反应

当事件发生时，可以执行 JavaScript，比如当用户点击一个 HTML 元素时。

如需在用户点击某个元素时执行代码，请把 JavaScript 代码添加到 HTML 事件属性中：

onclick=JavaScript

HTML 事件的例子：

当用户点击鼠标时
当网页已加载时
当图片已加载时
当鼠标移动到元素上时
当输入字段被改变时
当 HTML 表单被提交时
当用户触发按键时

在本例中，当用户点击时，会改变 <h1> 元素的内容：

实例

尝试一下 »

在本例中，会从事件处理程序中调用函数：

实例

尝试一下 »

HTML 事件属性

如需向 HTML 元素分配事件，您可以使用事件属性。

实例

向 button 元素分配一个 onclick 事件：

尝试一下 »

在上面的例子中，当点击按钮时，会执行名为 displayDate 的函数。

使用 HTML DOM 来分配事件

HTML DOM 允许您使用 JavaScript 向 HTML 元素分配事件：

实例

为 button 元素分配 onclick 事件：

document.getElementById("myBtn").onclick=function(){displayDate()};

尝试一下 »

在上面的例子中，名为 displayDate 的函数被分配给了 id=myButn" 的 HTML 元素。

当按钮被点击时，将执行函数。

onload 和 onunload 事件

当用户进入或离开页面时，会触发 onload 和 onunload 事件。

onload 事件可用于检查访客的浏览器类型和版本，以便基于这些信息来加载不同版本的网页。

onload 和 onunload 事件可用于处理 cookies。

实例

尝试一下 »

onchange 事件

onchange 事件常用于输入字段的验证。

下面的例子展示了如何使用 onchange。当用户改变输入字段的内容时，将调用 upperCase() 函数。

实例

尝试一下 »

onmouseover 和 onmouseout 事件

onmouseover 和 onmouseout 事件可用于在鼠标指针移动到或离开元素时触发函数。

实例

一个简单的 onmouseover-onmouseout 实例:

Mouse Over Me

尝试一下 »

onmousedown、onmouseup 以及 onclick 事件

onmousedown、onmouseup 以及 onclick 事件是鼠标点击的全部过程。首先当某个鼠标按钮被点击时，触发 onmousedown 事件，然后，当鼠标按钮被松开时，会触发 onmouseup 事件，最后，当鼠标点击完成时，触发 onclick 事件。

实例

一个简单的 onmousedown-onmouseup 实例：

Click Me

尝试一下 »

HTML DOM 事件对象参考手册

如需每个事件的完整描述和例子，请访问我们的 HTML DOM 参考手册。

	HTML DOM 事件

HTML DOM

HTML DOM目录

1.XML DOM 教程
2.HTML DOM 教程
3.XML DOM – 节点列表和命名节点图
4.XML DOM 节点信息
5.XML DOM 访问节点
6.XML DOM 方法
7.XML DOM 加载函数
8.XML DOM 解析器
9.XML DOM – 节点
10.XML DOM 简介
11.XML DOM – 添加节点
12.XML DOM – 创建节点
13.XML DOM – 替换节点
14.XML DOM – 删除节点
15.XML DOM – 改变节点值
16.XML DOM – 获取节点值
17.XML DOM 浏览器差异
18.XML DOM – 遍历节点树
19.XML DOM – ProcessingInstruction 对象
20.XML DOM – DocumentType 对象
21.XML DOM – DocumentImplementation 对象
22.XML DOM – Document 对象
23.XML DOM – NamedNodeMap 对象
24.XML DOM – NodeList 对象
25.XML DOM – Node 对象
26.XML DOM – 节点类型
27.XML DOM – HttpRequest 对象
28.XML DOM – 克隆节点
29.XML DOM nodeType 属性
30.XML DOM nodeName 属性
31.XML DOM nextSibling 属性
32.XML DOM namespaceURI 属性
33.XML DOM localName 属性
34.XML DOM lastChild 属性
35.XML DOM firstChild 属性
36.XML DOM childNodes 属性
37.XML DOM baseURI 属性
38.XML DOM compareDocumentPosition() 方法
39.XML DOM cloneNode() 方法
40.XML DOM appendChild() 方法
41.XML DOM textContent 属性
42.XML DOM previousSibling 属性
43.XML DOM prefix 属性
44.XML DOM parentNode 属性
45.XML DOM ownerDocument 属性
46.XML DOM nodeValue 属性
47.XML DOM replaceChild() 方法
48.XML DOM removeChild() 方法
49.XML DOM lookupPrefix() 方法
50.XML DOM lookupNamespaceURI() 方法
51.XML DOM isSameNode() 方法
52.XML DOM isEqualNode() 方法
53.XML DOM insertBefore() 方法
54.XML DOM hasChildNodes() 方法
55.XML DOM hasAttributes() 方法
56.XML DOM childNodes 属性
57.XML DOM async 属性
58.XML DOM removeNamedItem() 方法
59.XML DOM item() 方法
60.XML DOM getNamedItem() 方法
61.XML DOM length 属性
62.XML DOM item() 方法
63.XML DOM length 属性
64.XML DOM nodeName 属性
65.XML DOM lastChild 属性
66.XML DOM inputEncoding 属性
67.XML DOM implementation 属性
68.XML DOM firstChild 属性
69.XML DOM documentURI 属性
70.XML DOM documentElement 属性
71.XML DOM doctype 属性
72.XML DOM xmlVersion 属性
73.XML DOM xmlStandalone 属性
74.XML DOM xmlEncoding 属性
75.XML DOM strictErrorChecking 属性
76.XML DOM nodeValue 属性
77.XML DOM nodeType 属性
78.XML DOM getElementsByTagNameNS() 方法
79.XML DOM getElementsByTagName() 方法
80.XML DOM createTextNode() 方法
81.XML DOM createElementNS() 方法
82.XML DOM createElement() 方法
83.XML DOM createComment() 方法
84.XML DOM createCDATASection() 方法
85.XML DOM – HttpRequest 对象
86.XML DOM – Comment 对象
87.XML DOM – CDATASection 对象
88.XML DOM – Text 对象
89.XML DOM – Attr 对象
90.XML DOM – Element 对象
91.XML DOM renameNode() 方法
92.XML DOM 解析器错误
93.XML DOM Parse Error 对象
94.XML DOM attributes 属性
95.XML DOM systemId 属性
96.XML DOM name 属性
97.XML DOM internalSubset 属性
98.XML DOM entities 属性
99.XML DOM ownerDocument 属性
100.XML DOM nodeType 属性