HTML DOM 事件 - HTML DOM 基础教程 - 简单教程，简单编程

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

Mouse Over Me

Click Me

对事件作出反应

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

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

onclick= JavaScript code

下面是常用的 HTML DOM 事件

下面的范例，当用户在 <h1> 元素上点鼠标时击时，会改变 <h1> 元素的内容

<h1 onclick="this.innerHTML='简单教程'">点击文本</h1>

下面的代码，会从事件处理程序中调用 JavaScript 函数

<script>
function changetext(id) {
    id.innerHTML="简单教程";
}
</script>
<h1 onclick="changetext(this)">点击文本</h1>

我们可以使用 事件属性 向 HTML 元素分配事件

下面的代码向 button 元素分配一个 onclick 事件

当用户点击按钮时，会执行名为 displayDate() 的函数

<button onclick="displayDate()">点我</button>
<footer>简单教程，简单编程<br/>Copyright © 简单教程 www.twle.cn</footer>

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

下面的代码为 button 元素分配 onclick 事件，当按钮被点击时，将执行函数

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

当用户进入页面时，会触发 onload 事件

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

onload 事件可用于处理 cookies

<body onload="checkCookies()">

当用户离开页面时，会触发 onunload 事件

onunload 事件可用于处理 cookies

<body onload="checkCookies()">

注意，onunload 默认是不会执行任何弹窗动作的

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

下面的范例当用户改变输入字段的内容时，将调用 upperCase() 函数

<input type="text" id="fname" onchange="upperCase()">

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

Mouse Over Me

onmousedown、onmouseup 以及 onclick 事件是鼠标点击的全部过程

首先当某个鼠标按钮被点击时，触发 onmousedown 事件，然后，当鼠标按钮被松开时，会触发 onmouseup 事件，最后，当鼠标点击完成时，触发 onclick 事件

Click Me

如果你想要查看 HTML DOM 每个事件的范例，可以访问我们的 HTML DOM 参考手册