HTML 事件是发生在 HTML 元素上的“事物”。
当 JavaScript 用于 HTML 页面时,JavaScript 可以 “反应” 这些事件。
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 元素已更改
用户单击 HTML 元素
用户将鼠标移动到 HTML 元素上
用户将鼠标从 HTML 元素上移开
用户按下键盘按键
浏览器已完成页面加载
该列表更长:W3Schools JavaScript Reference HTML DOM Events。
事件处理程序可用于处理和验证用户输入、用户操作、 和浏览器操作:
每次页面加载时都应该做的事情
页面关闭时应该做的事情
用户单击按钮时应执行的操作
用户输入数据时应验证的内容
和更多 ...
可以使用许多不同的方法让 JavaScript 处理事件:
HTML事件属性可以直接执行JavaScript代码
HTML事件属性可以调用JavaScript函数
您可以将自己的事件处理函数分配给 HTML 元素
您可以阻止发送或处理事件
和更多 ...
您将在 HTML DOM 章节中了解有关事件和事件处理程序的更多信息。