JavaScript 事件(Events)

事件是在浏览器中发生的操作，可由用户或浏览器本身启动。

以下是一些可能在网站上发生的常见事件的示例：

• 页面加载完成

• 用户单击一个按钮

• 用户滚动文档

• 用户调整浏览器大小

• 用户移动鼠标

• 用户提交表单

• 用户按下键盘上的一个键

• HTML输入字段已更改

每个可用事件都有一个事件处理程序，该事件处理程序是代码块（通常是用户定义的JavaScript函数），将在事件触发时运行。

通过了解事件，您将能够为最终用户提供更具交互性的Web体验。

一个简单的实例

当事件触发时，例如用户单击按钮时，可以执行JavaScript代码块。

在下面的示例中，我们有一个按钮，按下该按钮将调用showDate()函数：

<button onclick="showDate()">Click me</button>

JavaScript showDate()函数如下所示：

<script>
function showDate() {
   document.getElementById("output").innerHTML = new Date();
}
</script>

使用事件的方式

可以通过三种方式将事件分配给元素，以便在关联事件触发时将其运行：

• 内联事件处理程序

• 事件处理程序属性

• 事件监听器

我们将介绍所有三种方法，以确保您熟悉触发事件的每种方式。

内联事件处理程序属性

要将事件分配给HTML元素，我们可以使用HTML事件属性。

在以下示例中，当用户单击<p>元素时，其内容会更改：

<p onclick="this.innerHTML = 'Hello world'">单击此处更改此文本</p>

在下面的示例中，当用户单击<p>元素时，将调用一个函数：

<p onclick="changeText(this)">单击此处更改此文本</p>

<script>
function changeText(self) {
   self.innerHTML = "Hello world";
}
</script>

在下面的示例中，我们有一个按钮，按下该按钮将使背景变为随机颜色：

<button onclick="bgChange()">Click me</button>

<script>
function bgChange() {
   let color = "rgb(" + random(255) + "," + random(255) + "," + random(255) + ")";
   document.body.style.backgroundColor = color;
}
</script>

内联事件处理程序是开始理解事件的简单方法，但通常不应将其用于测试和教育目的之外。

事件处理程序属性

内联事件处理程序的下一步是事件处理程序属性。这与内联处理程序非常相似，除了我们在JavaScript中设置元素的属性而不是HTML中的属性。

在以下示例中，我们将为id为“ para”的HTML元素分配onclick事件：

let para = document.querySelector("#para");

para.onclick = function() {
   this.innerHTML = "Hello world";
}

我们还可以将事件处理程序属性设置为等于命名函数名称：

let para = document.querySelector("#para");
para.onclick = changeText;

function changeText() {
   para.innerHTML = "Hello world";
}

在上面的示例中，将名为changeText的函数分配给具有id="para"的HTML元素。

单击该元素时将执行该功能。

在下面的示例中，我们有一个按钮，按下该按钮将使背景变为随机颜色：

let btn = document.querySelector("button");
btn.onclick = bgChange;

function bgChange() {
   let color = "rgb(" + random(255) + "," + random(255) + "," + random(255) + ")";
   document.body.style.backgroundColor = color;
}

注意：事件处理程序不遵循大多数JavaScript代码所遵循的camelCase 驼峰命名约定。注意，代码是onclick，不是onClick。

onfocus和onblur事件

onfocus当元素获得焦点时触发该事件。

onblur当元素失去焦点时会触发该事件。

<input type="text" onfocus="func1(this)" onblur="func2(this)">

onchange事件

onchange元素的值更改时将触发该事件。

<input type="text" onchange="myFunc(this)" value="Hello">

onmouseover和onmouseout事件

onmouseover当将指针设备（通常是鼠标）移动到元素或其子元素之一时，将触发该事件。

onmouseout当将指针设备（通常是鼠标）移离元素或其子元素之一时，将触发该事件。

进一步阅读

HTML参考：HTML事件属性参考

JavaScript参考：HTML DOM事件对象参考