JavaScript 事件介绍

Beginner

This tutorial is from open-source community. Access the source code

简介

欢迎来到 JavaScript 文档!本实验将向你介绍事件。

这是一个实验(Guided Lab),提供逐步指导来帮助你学习和实践。请仔细按照说明完成每个步骤,获得实际操作经验。根据历史数据,这是一个 初级 级别的实验,完成率为 100%。获得了学习者 100% 的好评率。

事件

虚拟机中已提供 index.html

网站上真正的交互性需要事件处理程序。这些是代码结构,用于监听浏览器中的活动并相应地运行代码。最明显的例子是处理 点击事件,当你用鼠标点击某个东西时,浏览器会触发该事件。要演示这一点,请在控制台中输入以下内容,然后点击当前网页:

document.querySelector("html").addEventListener("click", function () {
  alert("哎哟!别戳我了!");
});

有多种方法可以将事件处理程序附加到元素上。
在这里,我们选择了 <html> 元素。然后我们调用它的 addEventListener() 函数,传入要监听的事件名称 ('click') 和事件发生时要运行的函数。

我们刚刚传递给 addEventListener() 的函数称为 匿名函数,因为它没有名称。有一种编写匿名函数的替代方法,我们称之为 箭头函数
箭头函数使用 () => 而不是 function ()

document.querySelector("html").addEventListener("click", () => {
  alert("哎哟!别戳我了!");
});

请点击右下角的“上线”以在端口 8080 上运行网络服务。然后,你可以刷新 Web 8080 标签页以预览网页。

总结

恭喜你!你已完成事件实验。你可以在 LabEx 中练习更多实验以提升技能。