JavaScript 事件介绍

JavaScriptJavaScriptBeginner
立即练习

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

💡 本教程由 AI 辅助翻译自英文原版。如需查看原文,您可以 切换至英文原版

简介

欢迎来到 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 中练习更多实验以提升技能。