JavaScript 事件

HTML 事件是在 HTML 元素上的触发的事情。

当在 HTML 页面中使用 JavaScript 时，JavaScript 能够处理这些事件。

HTML 事件

HTML 事件可以是浏览器或用户做的某些事情。

下面是 HTML 事件的一些例子：

HTML 网页完成加载
HTML 输入字段被修改
HTML 按钮被点击

通常，当事件发生时，用户会希望做某件事。

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

通过 JavaScript 代码，HTML 允许您向 HTML 元素添加事件处理程序。

使用单引号：

<element event='一些 JavaScript'>

使用双引号：

<element event="一些 JavaScript">

在下面的例子中，onclick 属性（以及代码）被添加到 <button> 元素：

<!DOCTYPE html>
<html>
<body>
<h1>JavaScript 事件</h1>
<button onclick="document.getElementById('demo').innerHTML=Date()">时间是？</button>
<p id="demo">
</body>
</html>

运行一下

在上面的例子中，JavaScript 代码改变了 id="demo" 的元素的内容。

在接下来的例子中，代码（使用 this.innerHTML）改变了其自身元素的内容：

<!DOCTYPE html>
<html>
<body>
<h1>JavaScript 事件</h1>
<button onclick="this.innerHTML=Date()">时间是？</button>
</body>
</html>

运行一下

JavaScript 代码通常有很多行。事件属性调用函数更为常见：

<!DOCTYPE html>
<html>
<body>
<h1>JavaScript 事件</h1>
<p>点击按钮来显示日期。</p>
<button onclick="displayDate()">时间是？</button>
<script>
function displayDate() {
    document.getElementById("demo").innerHTML = Date();
}
</script>
<p id="demo">
</body>
</html>

运行一下

常见的 HTML 事件

下面是一些常见的 HTML 事件：

事件	描述
onchange	HTML 元素已被改变
onclick	用户点击了 HTML 元素
onmouseover	用户把鼠标移动到 HTML 元素上
onmouseout	用户把鼠标移开 HTML 元素
onkeydown	用户按下键盘按键
onload	浏览器已经完成页面加载

更完整的列表：HTML事件。

JavaScript 能够做什么？

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

每当页面加载时应该做的事情
当页面被关闭时应该做的事情
当用户点击按钮时应该被执行的动作
当用户输入数据时应该被验证的内容
等等

让 JavaScript 处理事件的不同方法有很多：

HTML 事件属性可执行 JavaScript 代码
HTML 事件属性能够调用 JavaScript 函数
您能够向 HTML 元素分配自己的事件处理函数
您能够阻止事件被发送或被处理
等等

JavaScript 事件

HTML 事件

常见的 HTML 事件

JavaScript 能够做什么？

分类导航