DOM 事件
HTML DOM 提供了给元素绑定事件处理程序的方法,这样就能在事件发生的时候做一些自定义的操作。
HTML DOM 提供了给元素绑定事件处理程序的方法,这样就能在事件发生的时候做一些自定义的操作。
对事件的反应
JavaScript 是基于事件驱动的程序,将自定义的事件处理程序绑定到事件后,当事件发生的时候,就会自动执行处理程序。
常见的 HTML 事件包括:
- 用户点击鼠标
- 网页加载完毕
- 加载图像
- 鼠标移动到元素上
- 更改输入字段
- 提交 HTML 表单
- 用户敲击一个键时
下面的例子,当用户点击 <h1>
元素时,元素的内容会发生变化:
<!DOCTYPE html>
<html>
<body>
<h1 onclick="this.innerHTML = 'Ooops!'">点击我</h1>
</body>
</html>
下面的例子给事件绑定一个函数:
<!DOCTYPE html>
<html>
<body>
<h1 onclick="changeText(this)">点击我</h1>
<script>
function changeText(element) {
element.innerHTML = "Ooops!";
}
</script>
</body>
</html>
HTML 事件属性
要将事件分配给 HTML 元素,您可以使用事件属性。
事件属性右 on
开头,后面跟着具体的事件代码, 比如 onclick
表示的是 click
事件,也就是单击鼠标左键。
为按钮元素分配一个 onclick
事件:
<button onclick="displayDate()">Try it</button>
在上面的示例中,单击按钮时将执行名为 displayDate
的函数。
使用 DOM 属性绑定事件
HTML DOM 允许您使用 JavaScript 将事件分配给 HTML 元素。
为按钮元素分配一个 onclick 事件:
<script>
document.getElementById("myBtn").onclick = displayDate;
</script>
在上面的例子中,一个名为的函数 displayDate
被绑定到一个 id
为 myBtn
的元素的 click
事件上。
onload 和 onunload 事件
onload
与 onunload
事件在当用户进入或离开页面的时候被触发。
onload
事件可用于检查访问者的浏览器类型和浏览器版本,并根据信息加载正确版本的网页。
onload
和 onunload
事件可以用来处理 Cookies。
<body onload="checkCookies()"></body>
onchange 事件
onchange
事件通常与输入字段的验证结合使用,当一个输入元素的内容发生改变时触发。
下面的示例中当用户更改输入字段的内容时调用 upperCase()
函数。
<input type="text" id="fname" onchange="upperCase()" />
onmouseover 和 onmouseout 事件
onmouseover
事件在用户将鼠标移动到元素上面时触发。
onmouseout
事件在用户将鼠标移动到元素外面时触发。
<!DOCTYPE html>
<html>
<body>
<div
onmouseover="mOver(this)"
onmouseout="mOut(this)"
style="background-color:#D94A38;width:120px;height:20px;padding:40px;"
>
请把鼠标放在上面
</div>
<script>
function mOver(obj) {
obj.innerHTML = "多谢";
}
function mOut(obj) {
obj.innerHTML = "请把鼠标放在上面";
}
</script>
</body>
</html>
onmousedown、onmouseup 和 onclick 事件
onmousedown
事件在用户按下鼠标左键时触发。
onmouseup
事件在用户松开鼠标左键时触发。
onclick
事件在用户完成一次完整的点击鼠标左键时除法
<!DOCTYPE html>
<html>
<body>
<div
onmousedown="mDown(this)"
onmouseup="mUp(this)"
style="background-color:#D94A38;width:90px;height:20px;padding:40px;"
>
点击我
</div>
<script>
function mDown(obj) {
obj.style.backgroundColor = "#1ec5e5";
obj.innerHTML = "松开我";
}
function mUp(obj) {
obj.style.backgroundColor = "#D94A38";
obj.innerHTML = "谢谢";
}
</script>
</body>
</html>