JavaScript 事件 | 网页开发教程

简介

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

Skills Graph

%%%%{init: {'theme':'neutral'}}%%%% flowchart RL javascript(("JavaScript")) -.-> javascript/BasicConceptsGroup(["Basic Concepts"]) javascript(("JavaScript")) -.-> javascript/AdvancedConceptsGroup(["Advanced Concepts"]) javascript(("JavaScript")) -.-> javascript/DOMManipulationGroup(["DOM Manipulation"]) javascript(("JavaScript")) -.-> javascript/ToolsandEnvironmentGroup(["Tools and Environment"]) javascript/BasicConceptsGroup -.-> javascript/data_types("Data Types") javascript/BasicConceptsGroup -.-> javascript/comp_ops("Comparison Operators") javascript/BasicConceptsGroup -.-> javascript/functions("Functions") javascript/AdvancedConceptsGroup -.-> javascript/closures("Closures") javascript/DOMManipulationGroup -.-> javascript/dom_select("DOM Selection") javascript/DOMManipulationGroup -.-> javascript/event_handle("Event Handling") javascript/ToolsandEnvironmentGroup -.-> javascript/bom("Browser Object Model") subgraph Lab Skills javascript/data_types -.-> lab-106901{{"JavaScript 事件介绍"}} javascript/comp_ops -.-> lab-106901{{"JavaScript 事件介绍"}} javascript/functions -.-> lab-106901{{"JavaScript 事件介绍"}} javascript/closures -.-> lab-106901{{"JavaScript 事件介绍"}} javascript/dom_select -.-> lab-106901{{"JavaScript 事件介绍"}} javascript/event_handle -.-> lab-106901{{"JavaScript 事件介绍"}} javascript/bom -.-> lab-106901{{"JavaScript 事件介绍"}} end

事件

虚拟机中已提供 index.html。

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

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

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

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

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

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

总结

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