JavaScript 事件


目录

    显示目录


HTML 事件是发生在 HTML 元素上的“事物”

当 JavaScript 用于 HTML 页面时,JavaScript 可以 “反应” 这些事件。


HTML 事件

HTML 事件可以是浏览器执行的操作,也可以是用户执行的操作。

以下是 HTML 事件的一些示例:

  • HTML 网页已完成加载

  • HTML 输入字段已更改

  • 单击了 HTML 按钮

通常,当事件发生时,您可能想做一些事情。

JavaScript 允许您在检测到事件时执行代码。

HTML 允许将事件处理程序属性(带有 JavaScript 代码)添加到 HTML 元素中。

带单引号:

<element
 event='some JavaScript'>

带双引号:

<element
 event="some JavaScript">

在以下示例中,将 onclick 属性(带有代码)添加到 <button> 元素:

例子

<button onclick="document.getElementById('demo').innerHTML = Date()">The time is?</button>

自己尝试一下 →

<!DOCTYPE html>
<html>
<body>

<button onclick="document.getElementById('demo').innerHTML=Date()">The time is?</button>

<p id="demo"></p>

</body>
</html>

在上面的示例中,JavaScript 代码更改了内容 id="demo" 的元素。

在下一个示例中,代码更改了内容 它自己的元素(使用 this.innerHTML):

例子

<button onclick="this.innerHTML = Date()">The time is?</button>

自己尝试一下 →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript HTML Events</h2>
<button onclick="this.innerHTML=Date()">The time is?</button>

</body>
</html>

JavaScript 代码通常有几行长。更常见的是事件属性调用函数:

例子

<button onclick="displayDate()">The time is?</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> 


常见 HTML 事件

以下是一些常见 HTML 事件的列表:

onchange

HTML 元素已更改

onclick

用户单击 HTML 元素

onmouseover

用户将鼠标移动到 HTML 元素上

onmouseout

用户将鼠标从 HTML 元素上移开

onkeydown

用户按下键盘按键

onload

浏览器已完成页面加载

该列表更长:W3Schools JavaScript Reference HTML DOM Events。


JavaScript 事件处理程序

事件处理程序可用于处理和验证用户输入、用户操作、 和浏览器操作:

  • 每次页面加载时都应该做的事情

  • 页面关闭时应该做的事情

  • 用户单击按钮时应执行的操作

  • 用户输入数据时应验证的内容

  • 和更多 ...

可以使用许多不同的方法让 JavaScript 处理事件:

  • HTML事件属性可以直接执行JavaScript代码

  • HTML事件属性可以调用JavaScript函数

  • 您可以将自己的事件处理函数分配给 HTML 元素

  • 您可以阻止发送或处理事件

  • 和更多 ...

您将在 HTML DOM 章节中了解有关事件和事件处理程序的更多信息。