JavaScript 事件监听JavaScript 数组迭代方法
JavaScript 事件(Events)
事件是在浏览器中发生的操作，可由用户或浏览器本身启动。
以下是一些可能在网站上发生的常见事件的示例：
页面加载完成
用户单击一个按钮
用户滚动文档
用户调整浏览器大小
用户移动鼠标
用户提交表单
用户按下键盘上的一个键
HTML输入字段已更改
每个可用事件都有一个事件处理程序，该事件处理程序是代码块（通常是用户定义的JavaScript函数），将在事件触发时运行。
通过了解事件，您将能够为最终用户提供更具交互性的Web体验。
一个简单的实例当事件触发时，例如用户单击按钮时，可以执行JavaScript代码块。
在下面的示例中，我们有一个按钮，按下该按钮将调用showDate()函数：
JavaScript showDate()函数如下所示：
示例测试看看‹/›使用事件的方式可以通过三种方式将事件分配给元素，以便在关联事件触发时将其运行：
内联事件处理程序
事件处理程序属性
事件监听器
我们将介绍所有三种方法，以确保您熟悉触发事件的每种方式。
内联事件处理程序属性要将事件分配给HTML元素，我们可以使用HTML事件属性。
在以下示例中，当用户单击
元素时，其内容会更改：
示例
单击此处更改此文本
测试看看‹/›在下面的示例中，当用户单击元素时，将调用一个函数：
示例
单击此处更改此文本
测试看看‹/›在下面的示例中，我们有一个按钮，按下该按钮将使背景变为随机颜色：
示例
测试看看‹/›内联事件处理程序是开始理解事件的简单方法，但通常不应将其用于测试和教育目的之外。
事件处理程序属性内联事件处理程序的下一步是事件处理程序属性。这与内联处理程序非常相似，除了我们在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当元素失去焦点时会触发该事件。
示例测试看看‹/›onchange事件onchange元素的值更改时将触发该事件。
示例测试看看‹/›onmouseover和onmouseout事件onmouseover当将指针设备（通常是鼠标）移动到元素或其子元素之一时，将触发该事件。
onmouseout当将指针设备（通常是鼠标）移离元素或其子元素之一时，将触发该事件。
把鼠标指针移到我身上!!!
进一步阅读HTML参考：HTML事件属性参考
JavaScript参考：HTML DOM事件对象参考
JavaScript 事件监听JavaScript 数组迭代方法