HTML DOM 允许 JavaScript 对 HTML 事件做出反应:
JavaScript 可以在事件发生时执行,例如当用户单击 HTML 元素时。
要在用户单击元素时执行代码,请将 JavaScript 代码添加到 HTML 事件属性:
onclick=JavaScript
HTML 事件示例:
当用户单击鼠标时
当网页加载完毕后
当图像已加载时
当鼠标移到某个元素上时
当输入字段改变时
当提交 HTML 表单时
当用户敲击按键时
在此示例中,当用户单击 <h1>
元素时,该元素的内容会发生更改:
<!DOCTYPE html>
<html>
<body>
<h1 onclick="this.innerHTML = 'Ooops!'">Click on this text!</h1>
</body>
</html>
自己尝试一下 →
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript HTML Events</h2>
<h2 onclick="this.innerHTML='Ooops!'">Click on this text!</h2>
</body>
</html>
在此示例中,从事件处理程序调用一个函数:
<!DOCTYPE html>
<html>
<body>
<h1 onclick="changeText(this)">Click on this text!</h1>
<script>
function changeText(id) {
id.innerHTML = "Ooops!";
}
</script>
</body>
</html>
自己尝试一下 →
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript HTML Events</h2>
<h2 onclick="changeText(this)">Click on this text!</h2>
<script>
function changeText(id) {
id.innerHTML = "Ooops!";
}
</script>
</body>
</html>
要将事件分配给 HTML 元素,您可以使用事件属性。
将 onclick 事件分配给按钮元素:
<button onclick="displayDate()">Try it</button>
自己尝试一下 →
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript HTML Events</h2>
<p>Click the button to display the date.</p>
<button onclick="displayDate()">The time is?</button>
<script>
function displayDate() {
document.getElementById("demo").innerHTML = Date();
}
</script>
<p id="demo"></p>
</body>
</html>
在上面的示例中,将执行名为 displayDate
的函数 单击按钮时。
HTML DOM 允许您使用 JavaScript 将事件分配给 HTML 元素:
将 onclick 事件分配给按钮元素:
<script>
document.getElementById("myBtn").onclick = displayDate;
</script>
自己尝试一下 →
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript HTML Events</h2>
<p>Click "Try it" to execute the displayDate() function.</p>
<button id="myBtn">Try it</button>
<p id="demo"></p>
<script>
document.getElementById("myBtn").onclick = displayDate;
function displayDate() {
document.getElementById("demo").innerHTML = Date();
}
</script>
</body>
</html>
在上面的示例中,名为 displayDate
的函数被分配给 带有 id="myBtn"
的 HTML 元素。
该函数将被执行 单击按钮时。
onload
和 onunload
事件在用户进入或离开页面时触发。
onload
事件可用于检查访问者的浏览器类型和浏览器版本,并根据该信息加载正确版本的网页。
onload
和 onunload
事件可用于处理 cookie。
<body onload="checkCookies()">
自己尝试一下 →
<!DOCTYPE html>
<html>
<body onload="checkCookies()">
<h2>JavaScript HTML Events</h2>
<p id="demo"></p>
<script>
function checkCookies() {
var text = "";
if (navigator.cookieEnabled == true) {
text = "Cookies are enabled.";
} else {
text = "Cookies are not enabled.";
}
document.getElementById("demo").innerHTML = text;
}
</script>
</body>
</html>
onchange
事件通常与输入字段的验证结合使用。
下面是如何使用 onchange 的示例。 upperCase()
当用户更改输入字段的内容时将调用该函数。
<input type="text" id="fname"
onchange="upperCase()">
自己尝试一下 →
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript HTML Events</h2>
Enter your name: <input type="text" id="fname" onchange="upperCase()">
<p>When you leave the input field, a function is triggered which transforms the input text to upper case.</p>
<script>
function upperCase() {
const x = document.getElementById("fname");
x.value = x.value.toUpperCase();
}
</script>
</body>
</html>
onmouseover
和 onmouseout
事件可用于在用户鼠标移动时触发函数 在 HTML 元素之上或之外:
自己尝试一下 →
<!DOCTYPE html>
<html>
<body>
<div onmouseover="mOver(this)" onmouseout="mOut(this)"
style="background-color:#D94A38;width:120px;height:20px;padding:40px;">
Mouse Over Me</div>
<script>
function mOver(obj) {
obj.innerHTML = "Thank You"
}
function mOut(obj) {
obj.innerHTML = "Mouse Over Me"
}
</script>
</body>
</html>
onmousedown
、onmouseup
和 onclick
事件都是a的所有部分 单击鼠标。首先,当单击鼠标按钮时, onmousedown 事件是 然后,当鼠标按钮触发 松开后,会触发 onmouseup 事件,最后,当鼠标单击完成时,会触发 onclick 事件。
自己尝试一下 →
<!DOCTYPE html>
<html>
<body>
<div onmousedown="mDown(this)" onmouseup="mUp(this)"
style="background-color:#D94A38;width:90px;height:20px;padding:40px;">
Click Me</div>
<script>
function mDown(obj) {
obj.style.backgroundColor = "#1ec5e5";
obj.innerHTML = "Release Me";
}
function mUp(obj) {
obj.style.backgroundColor="#D94A38";
obj.innerHTML="Thank You";
}
</script>
</body>
</html>
onmousedown 和 onmouseup
<!DOCTYPE html>
<html>
<head>
<script>
function lighton() {
document.getElementById('myimage').src = "bulbon.gif";
}
function lightoff() {
document.getElementById('myimage').src = "bulboff.gif";
}
</script>
</head>
<body>
<img id="myimage" onmousedown="lighton()" onmouseup="lightoff()" src="bulboff.gif" width="100" height="180" />
<p>Click mouse and hold down!</p>
</body>
</html>
当用户按住鼠标按钮时更改图像。
负载
<!DOCTYPE html>
<html>
<head>
<script>
function mymessage() {
alert("This message was triggered from the onload event");
}
</script>
</head>
<body onload="mymessage()">
</body>
</html>
页面加载完成后显示警告框。
焦点
<!DOCTYPE html>
<html>
<head>
<script>
function myFunction(x) {
x.style.background = "yellow";
}
</script>
</head>
<body>
Enter your name: <input type="text" onfocus="myFunction(this)">
<p>When the input field gets focus, a function is triggered which changes the background-color.</p>
</body>
</html>
当输入字段获得焦点时更改其背景颜色。
鼠标事件
<!DOCTYPE html>
<html>
<body>
<h1 onmouseover="style.color='red'"
onmouseout="style.color='black'">
Mouse over this text</h1>
</body>
</html>
当光标移到元素上时更改元素的颜色。
有关所有 HTML DOM 事件的列表,请查看我们完整的 HTML DOM 事件对象参考。