JavaScript DOM 事件


目录

    显示目录


HTML DOM 允许 JavaScript 对 HTML 事件做出反应:

Mouse Over Me
Click Me

对事件做出反应

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 事件属性

要将事件分配给 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 分配事件

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 事件

onloadonunload 事件在用户进入或离开页面时触发。

onload 事件可用于检查访问者的浏览器类型和浏览器版本,并根据该信息加载正确版本的网页。

onloadonunload 事件可用于处理 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 事件通常与输入字段的验证结合使用。

下面是如何使用 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 事件

onmouseoveronmouseout 事件可用于在用户鼠标移动时触发函数 在 HTML 元素之上或之外:

Mouse Over Me

自己尝试一下 →

<!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 事件

onmousedownonmouseuponclick 事件都是a的所有部分 单击鼠标。首先,当单击鼠标按钮时, onmousedown 事件是 然后,当鼠标按钮触发 松开后,会触发 onmouseup 事件,最后,当鼠标单击完成时,会触发 onclick 事件。

Click Me

自己尝试一下 →

<!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 事件的列表,请查看我们完整的 HTML DOM 事件对象参考。