处理事件

你拥有掌控自己思想的力量——而不是外部事件。意识到这一点，你将发现力量。

有些程序使用直接的用户输入，例如鼠标和键盘操作。这种类型的输入无法提前获得，因为它不是一个组织良好的数据结构——它是实时分段获取的，程序必须在输入发生时做出响应。

事件处理程序

想象一个界面，其中唯一确定键盘上某个键是否被按下的方法是读取该键的当前状态。为了能够对按键做出反应，您必须不断读取该键的状态，以在它再次释放之前捕获它。执行其他耗时的计算将很危险，因为您可能会错过按键。

一些原始机器以这种方式处理输入。比这更进一步的是硬件或操作系统会注意到按键并将它放入队列中。然后，程序可以定期检查队列是否有新事件并对其进行响应。

当然，程序必须记住要查看队列，并且要经常查看，因为在按键被按下和程序注意到事件之间的时间会导致软件感觉没有响应。这种方法称为轮询。大多数程序员更喜欢避免它。

更好的机制是让系统在事件发生时主动通知代码。浏览器通过允许我们注册函数作为特定事件的处理程序来做到这一点。

<p>Click this document to activate the handler.</p>
<script>
  window.addEventListener("click", () => {
    console.log("You knocked?");
  });
</script>

window绑定指的是浏览器提供的一个内置对象。它表示包含文档的浏览器窗口。调用其addEventListener方法会注册第二个参数，以便在第一个参数描述的事件发生时调用。

事件和 DOM 节点

每个浏览器事件处理程序都在一个上下文中注册。在前面的示例中，我们调用了window对象的addEventListener来注册整个窗口的处理程序。这种方法也可以在 DOM 元素和其他类型的对象上找到。事件监听器只会在事件发生在注册它们的对象的上下文中时被调用。

<button>Click me</button>
<p>No handler here.</p>
<script>
  let button = document.querySelector("button");
  button.addEventListener("click", () => {
    console.log("Button clicked.");
  });
</script>

该示例将处理程序附加到按钮节点。点击按钮会导致该处理程序运行，但点击文档的其余部分不会。

给节点一个onclick属性有类似的效果。这适用于大多数类型的事件——您可以通过以on开头的事件名称命名的属性附加处理程序。

但是一个节点只能有一个onclick属性，因此您只能通过这种方式为每个节点注册一个处理程序。addEventListener方法允许您添加任意数量的处理程序，这意味着即使元素上已经有另一个处理程序，添加处理程序也是安全的。

removeEventListener方法使用与addEventListener类似的参数调用，删除处理程序。

<button>Act-once button</button>
<script>
  let button = document.querySelector("button");
  function once() {
    console.log("Done.");
    button.removeEventListener("click", once);
  }
  button.addEventListener("click", once);
</script>

传递给removeEventListener的函数必须与传递给addEventListener的函数值相同。当您需要取消注册处理程序时，您需要给处理程序函数命名（在示例中为once），以便能够将相同的函数值传递给这两个方法。

事件对象

虽然我们一直忽略它，但事件处理程序函数会传递一个参数：事件对象。该对象包含有关事件的附加信息。例如，如果我们想知道按下了哪个鼠标按钮，我们可以查看事件对象的button属性。

<button>Click me any way you want</button>
<script>
  let button = document.querySelector("button");
  button.addEventListener("mousedown", event => {
    if (event.button == 0) {
      console.log("Left button");
    } else if (event.button == 1) {
      console.log("Middle button");
    } else if (event.button == 2) {
      console.log("Right button");
    }
  });
</script>

存储在事件对象中的信息因事件类型而异。（我们将在本章后面讨论不同的类型。）该对象的type属性始终包含一个字符串，用于标识事件（例如"click"或"mousedown"）。

传播

对于大多数事件类型，注册在具有子节点的节点上的处理程序也会收到在子节点中发生的事件。如果段落中的按钮被点击，则段落上的事件处理程序也会看到点击事件。

但是，如果段落和按钮都有处理程序，则更具体的处理程序（按钮上的那个）会先执行。据说事件从发生事件的节点向外传播到该节点的父节点，一直传播到文档的根节点。最后，在注册在特定节点上的所有处理程序都执行完后，注册在整个窗口上的处理程序将有机会响应事件。

在任何时候，事件处理程序都可以调用事件对象上的stopPropagation方法来阻止更上层的处理程序接收事件。这在以下情况下很有用，例如，您有一个按钮位于另一个可点击元素内，并且您不希望点击按钮激活外部元素的点击行为。

以下示例在按钮和周围的段落上都注册了"mousedown"处理程序。当用右键点击时，按钮的处理程序会调用stopPropagation，这将阻止段落的处理程序运行。当用另一个鼠标按钮点击按钮时，两个处理程序都会运行。

<p>A paragraph with a <button>button</button>.</p>
<script>
  let para = document.querySelector("p");
  let button = document.querySelector("button");
  para.addEventListener("mousedown", () => {
    console.log("Handler for paragraph.");
  });
  button.addEventListener("mousedown", event => {
    console.log("Handler for button.");
    if (event.button == 2) event.stopPropagation();
  });
</script>

大多数事件对象都有一个target属性，它指的是它们起源的节点。您可以使用此属性来确保您不会意外地处理从您不想处理的节点传播上来的内容。

也可以使用target属性来广泛地搜索特定类型的事件。例如，如果您有一个包含长按钮列表的节点，将单个点击处理程序注册在外部节点上并让它使用target属性来确定是否点击了按钮，可能比在所有按钮上注册单个处理程序更方便。

<button>A</button>
<button>B</button>
<button>C</button>
<script>
  document.body.addEventListener("click", event => {
    if (event.target.nodeName == "BUTTON") {
      console.log("Clicked", event.target.textContent);
    }
  });
</script>

默认操作

许多事件都有一个默认操作。如果您点击链接，您将被带到链接的目标。如果您按下向下箭头，浏览器将向下滚动页面。如果您右键点击，您将获得一个上下文菜单。等等。

对于大多数类型的事件，JavaScript 事件处理程序在默认行为发生之前被调用。如果处理程序不希望此正常行为发生，通常是因为它已经处理了事件，它可以调用事件对象上的preventDefault方法。

这可以用来实现您自己的键盘快捷键或上下文菜单。它也可以用来令人讨厌地干扰用户期望的行为。例如，这是一个无法跟随的链接

<a href="https://mdn.org.cn/">MDN</a>
<script>
  let link = document.querySelector("a");
  link.addEventListener("click", event => {
    console.log("Nope.");
    event.preventDefault();
  });
</script>

尽量不要在没有充分理由的情况下这样做。当预期的行为被破坏时，它会让使用您的页面的人感到不愉快。

根据浏览器的不同，有些事件根本无法拦截。例如，在 Chrome 上，关闭当前选项卡的键盘快捷键（ctrl-W 或 command-W）无法由 JavaScript 处理。

按键事件

当键盘上的键被按下时，您的浏览器会触发一个"keydown"事件。当它被释放时，您将获得一个"keyup"事件。

<p>This page turns violet when you hold the V key.</p>
<script>
  window.addEventListener("keydown", event => {
    if (event.key == "v") {
      document.body.style.background = "violet";
    }
  });
  window.addEventListener("keyup", event => {
    if (event.key == "v") {
      document.body.style.background = "";
    }
  });
</script>

尽管它的名字是"keydown"，但它不仅仅在物理按下键时触发。当键被按下并保持按下时，事件会在每次键重复时再次触发。有时您必须小心这一点。例如，如果您在按键被按下时向 DOM 添加一个按钮，并在按键被释放时再次将其删除，您可能会在键被按住更长时间时意外地添加数百个按钮。

前面的示例查看了事件对象的key属性，以查看哪个键是关于该事件的。此属性包含一个字符串，对于大多数键，该字符串对应于按下该键将键入的内容。对于enter之类的特殊键，它包含一个命名该键的字符串（在这种情况下为"Enter"）。如果您按住shift的同时按下键，这也会影响键的名称——"v"变为"V"，"1"可能变为"!"，如果这就是在您的键盘上按下shift-1 所产生的结果。

修饰键，例如shift、ctrl、alt和meta（在 Mac 上为command），会像普通键一样生成按键事件。当查找键组合时，您还可以通过查看键盘和鼠标事件的shiftKey、ctrlKey、altKey和metaKey属性来确定这些键是否被按住。

<p>Press Control-Space to continue.</p>
<script>
  window.addEventListener("keydown", event => {
    if (event.key == " " && event.ctrlKey) {
      console.log("Continuing!");
    }
  });
</script>

按键事件的来源 DOM 节点取决于按下键时具有焦点的元素。大多数节点无法获得焦点，除非您为它们提供tabindex属性，但链接、按钮和表单字段可以。我们将在第 18 章中回到表单字段。当没有特定内容具有焦点时，document.body充当按键事件的目标节点。

当用户正在输入文本时，使用按键事件来确定输入的内容是有问题的。有些平台，最显著的是 Android 手机上的虚拟键盘，不会触发按键事件。但即使使用传统的键盘，某些类型的文本输入也不与按键直接对应，例如输入法编辑器（IME）软件，用于那些脚本不适合键盘的人，需要多个按键组合才能创建字符。

为了注意到何时输入了内容，可以输入的元素，例如<input> 和 <textarea> 标签，会在用户更改内容时触发"input" 事件。要获取实际输入的内容，最好直接从焦点所在的字段读取，我们在第 18 章中讨论过。

指针事件

目前，有两种广泛使用的方式来指向屏幕上的东西：鼠标（包括像鼠标一样工作的设备，如触控板和轨迹球）和触摸屏。它们会产生不同类型的事件。

鼠标点击

按下鼠标按钮会触发一系列事件。"mousedown" 和 "mouseup" 事件类似于 "keydown" 和 "keyup"，当按下和释放按钮时会触发。这些事件发生在鼠标指针下方、最靠近鼠标指针的 DOM 节点上。

在 "mouseup" 事件之后，"click" 事件会在包含按下和释放按钮的两个节点中最具体的节点上触发。例如，如果我按下鼠标按钮在一个段落上，然后移动指针到另一个段落并释放按钮，"click" 事件将发生在包含这两个段落的元素上。

如果两次点击时间间隔很短，那么在第二次点击事件之后还会触发 "dblclick"（双击）事件。

为了获得鼠标事件发生位置的精确信息，您可以查看其 clientX 和 clientY 属性，它们包含相对于窗口左上角的事件坐标（以像素为单位），或者 pageX 和 pageY，它们相对于整个文档的左上角（当窗口滚动时可能会有所不同）。

以下程序实现了一个简单的绘图应用程序。每次您点击文档时，它会在鼠标指针下方添加一个点。

<style>
  body {
    height: 200px;
    background: beige;
  }
  .dot {
    height: 8px; width: 8px;
    border-radius: 4px; /* rounds corners */
    background: teal;
    position: absolute;
  }
</style>
<script>
  window.addEventListener("click", event => {
    let dot = document.createElement("div");
    dot.className = "dot";
    dot.style.left = (event.pageX - 4) + "px";
    dot.style.top = (event.pageY - 4) + "px";
    document.body.appendChild(dot);
  });
</script>

我们在 第 19 章中将创建一个更复杂的绘图应用程序。

鼠标移动

每次鼠标指针移动时，都会触发 "mousemove" 事件。此事件可用于跟踪鼠标位置。实现某种形式的鼠标拖动功能时，通常需要用到它。

例如，以下程序显示一个条形，并设置事件处理程序，以便在该条形上向左或向右拖动可以使其变窄或变宽

<p>Drag the bar to change its width:</p>
<div style="background: orange; width: 60px; height: 20px">
</div>
<script>
  let lastX; // Tracks the last observed mouse X position
  let bar = document.querySelector("div");
  bar.addEventListener("mousedown", event => {
    if (event.button == 0) {
      lastX = event.clientX;
      window.addEventListener("mousemove", moved);
      event.preventDefault(); // Prevent selection
    }
  });

  function moved(event) {
    if (event.buttons == 0) {
      window.removeEventListener("mousemove", moved);
    } else {
      let dist = event.clientX - lastX;
      let newWidth = Math.max(10, bar.offsetWidth + dist);
      bar.style.width = newWidth + "px";
      lastX = event.clientX;
    }
  }
</script>

请注意，"mousemove" 处理程序是在整个窗口上注册的。即使鼠标在调整大小过程中移出条形，只要按钮被按下，我们仍然希望更新其大小。

当鼠标按钮释放时，我们必须停止调整条形大小。为此，我们可以使用 buttons 属性（注意复数），它告诉我们当前按下的按钮。当它为 0 时，表示没有按钮被按下。当按下按钮时，buttons 属性的值是这些按钮代码的总和——左按钮代码为 1，右按钮代码为 2，中间按钮代码为 4。例如，当按下左按钮和右按钮时，buttons 的值为 3。

请注意，这些代码的顺序与 button 中使用的顺序不同，在 button 中，中间按钮在右按钮之前。如前所述，一致性不是浏览器编程接口的强项。

触摸事件

我们使用的图形浏览器风格是在鼠标界面设计中形成的，当时触摸屏很少见。为了让网页在早期的触摸屏手机上“正常工作”，这些设备的浏览器在一定程度上假装触摸事件是鼠标事件。如果您点击屏幕，您将获得 "mousedown"、"mouseup" 和 "click" 事件。

但这种假象并不牢固。触摸屏不像鼠标那样工作：它没有多个按钮，您无法在手指离开屏幕时跟踪它（以模拟 "mousemove"），并且它允许同时在屏幕上有多个手指。

鼠标事件仅在简单的情况下涵盖触摸交互——如果您向按钮添加 "click" 处理程序，触摸屏用户仍然可以使用它。但像前面示例中可调整大小的条形这样的东西在触摸屏上不起作用。

触摸交互会触发特定的事件类型。当手指开始触摸屏幕时，您会收到 "touchstart" 事件。当手指在触摸时移动时，会触发 "touchmove" 事件。最后，当手指停止触摸屏幕时，您将看到 "touchend" 事件。

因为许多触摸屏可以同时检测多个手指，所以这些事件没有与它们关联的单个坐标集。相反，它们的事件对象具有一个 touches 属性，该属性包含一个点数组，每个点都有自己的 clientX、clientY、pageX 和 pageY 属性。

您可以执行类似以下操作，以在每个触摸手指周围显示红色圆圈

<style>
  dot { position: absolute; display: block;
        border: 2px solid red; border-radius: 50px;
        height: 100px; width: 100px; }
</style>
<p>Touch this page</p>
<script>
  function update(event) {
    for (let dot; dot = document.querySelector("dot");) {
      dot.remove();
    }
    for (let i = 0; i < event.touches.length; i++) {
      let {pageX, pageY} = event.touches[i];
      let dot = document.createElement("dot");
      dot.style.left = (pageX - 50) + "px";
      dot.style.top = (pageY - 50) + "px";
      document.body.appendChild(dot);
    }
  }
  window.addEventListener("touchstart", update);
  window.addEventListener("touchmove", update);
  window.addEventListener("touchend", update);
</script>

您通常需要在触摸事件处理程序中调用 preventDefault 来覆盖浏览器的默认行为（可能包括在滑动时滚动页面）并阻止鼠标事件被触发，您可能也为这些事件添加了处理程序。

滚动事件

每当滚动元素时，就会在该元素上触发 "scroll" 事件。它有多种用途，例如知道用户当前正在查看什么（用于禁用屏幕外动画或将间谍报告发送到您的邪恶总部）或显示一些进度指示（通过突出显示目录的一部分或显示页码）。

以下示例在文档上方绘制一个进度条，并在您向下滚动时更新它以填满

<style>
  #progress {
    border-bottom: 2px solid blue;
    width: 0;
    position: fixed;
    top: 0; left: 0;
  }
</style>
<div id="progress"></div>
<script>
  // Create some content
  document.body.appendChild(document.createTextNode(
    "supercalifragilisticexpialidocious ".repeat(1000)));

  let bar = document.querySelector("#progress");
  window.addEventListener("scroll", () => {
    let max = document.body.scrollHeight - innerHeight;
    bar.style.width = `${(pageYOffset / max) * 100}%`;
  });
</script>

将元素的 position 设置为 fixed 类似于 absolute 位置，但也阻止它与文档的其余部分一起滚动。这样可以使我们的进度条保持在顶部。它的宽度会改变以指示当前进度。我们在设置宽度时使用 % 而不是 px 作为单位，这样元素的大小相对于页面宽度。

全局 innerHeight 绑定提供窗口的高度，我们必须从总的可滚动高度中减去它——当您到达文档底部时，您无法继续滚动。还有一个 innerWidth 用于窗口宽度。通过将 pageYOffset（当前滚动位置）除以最大滚动位置并乘以 100，我们可以获得进度条的百分比。

在滚动事件上调用 preventDefault 不会阻止滚动发生。事实上，事件处理程序只在滚动完成后才会被调用。

焦点事件

当元素获得焦点时，浏览器会在该元素上触发 "focus" 事件。当它失去焦点时，该元素会收到 "blur" 事件。

与前面讨论的事件不同，这两个事件不会传播。当子元素获得或失去焦点时，父元素上的处理程序不会收到通知。

以下示例显示当前具有焦点的文本字段的帮助文本

<p>Name: <input type="text" data-help="Your full name"></p>
<p>Age: <input type="text" data-help="Your age in years"></p>
<p id="help"></p>

<script>
  let help = document.querySelector("#help");
  let fields = document.querySelectorAll("input");
  for (let field of Array.from(fields)) {
    field.addEventListener("focus", event => {
      let text = event.target.getAttribute("data-help");
      help.textContent = text;
    });
    field.addEventListener("blur", event => {
      help.textContent = "";
    });
  }
</script>

当用户从显示文档的浏览器标签或窗口移入或移出时，窗口对象将收到 "focus" 和 "blur" 事件。

加载事件

当页面加载完毕时，会在窗口和文档主体对象上触发 "load" 事件。这通常用于安排需要整个文档构建完成的初始化操作。请记住，<script> 标签的内容会在遇到该标签时立即运行。这可能过早，例如当脚本需要对出现在 <script> 标签之后的文档部分执行某些操作时。

加载外部文件的图像和脚本标签等元素也有一个 "load" 事件，指示它们引用的文件已加载。与焦点相关事件类似，加载事件不会传播。

当您关闭页面或从页面导航到其他页面（例如，通过点击链接）时，会触发 "beforeunload" 事件。此事件的主要用途是防止用户在关闭文档时意外丢失工作。如果您阻止此事件的默认行为并同时将事件对象的 returnValue 属性设置为字符串，浏览器将向用户显示一个对话框，询问他们是否真的要离开页面。该对话框可能包含您的字符串，但由于一些恶意网站试图利用这些对话框来迷惑用户，让他们留在他们的页面上观看可疑的减肥广告，因此大多数浏览器不再显示它们。

事件和事件循环

在事件循环的上下文中，如 第 11 章中所述，浏览器事件处理程序的行为与其他异步通知类似。它们在事件发生时被调度，但必须等待其他正在运行的脚本完成才能有机会运行。

事件只能在其他任务都停止运行时才能被处理，这意味着如果事件循环被其他工作占用，任何与页面的交互（通过事件发生）都会延迟到有时间处理它为止。 因此，如果您安排了太多工作，无论是长时间运行的事件处理程序还是大量短时间运行的事件处理程序，页面都会变得缓慢且难以使用。

对于您确实想要在后台执行一些耗时任务而不会冻结页面的情况，浏览器提供了名为Web Workers的机制。 Worker 是一个 JavaScript 进程，它与主脚本并行运行，拥有独立的时间线。

想象一下，对数字进行平方运算是一个繁重的、长时间运行的计算，我们希望在一个单独的线程中执行它。 我们可以编写一个名为 code/squareworker.js 的文件，它通过计算平方并发送消息来响应消息。

addEventListener("message", event => {
  postMessage(event.data * event.data);
});

为了避免多个线程访问相同数据的冲突问题，Worker 不与主脚本的环境共享其全局作用域或任何其他数据。 相反，您必须通过来回发送消息与它们进行通信。

此代码生成一个运行该脚本的 Worker，向它发送一些消息，并输出响应。

let squareWorker = new Worker("code/squareworker.js");
squareWorker.addEventListener("message", event => {
  console.log("The worker responded:", event.data);
});
squareWorker.postMessage(10);
squareWorker.postMessage(24);

postMessage 函数发送消息，这将在接收器中触发 "message" 事件。 创建 Worker 的脚本通过 Worker 对象发送和接收消息，而 Worker 通过直接在全局作用域中发送和监听来与创建它的脚本进行通信。 只有可以表示为 JSON 的值才能作为消息发送 - 另一方将收到它们的副本，而不是值本身。

计时器

我们在第 11 章中看到的 setTimeout 函数安排了另一个函数在给定的毫秒数之后被调用。 有时您需要取消已安排的函数。 您可以通过存储 setTimeout 返回的值并在其上调用 clearTimeout 来实现这一点。

let bombTimer = setTimeout(() => {
  console.log("BOOM!");
}, 500);

if (Math.random() < 0.5) { // 50% chance
  console.log("Defused.");
  clearTimeout(bombTimer);
}

cancelAnimationFrame 函数的工作方式与 clearTimeout 相同。 在 requestAnimationFrame 返回的值上调用它将取消该帧（假设它还没有被调用）。

一组类似的函数 setInterval 和 clearInterval 用于设置每 X 毫秒重复一次的计时器。

let ticks = 0;
let clock = setInterval(() => {
  console.log("tick", ticks++);
  if (ticks == 10) {
    clearInterval(clock);
    console.log("stop.");
  }
}, 200);

防抖

某些类型的事件有可能快速连续触发多次，例如 "mousemove" 和 "scroll" 事件。 处理此类事件时，您必须小心不要执行任何过于耗时的操作，否则您的处理程序会占用太多时间，导致与文档的交互开始变得缓慢。

如果您确实需要在这样的处理程序中执行一些非平凡的操作，您可以使用 setTimeout 来确保您不要太频繁地执行它。 这通常被称为事件防抖。 有几种略有不同的方法可以实现这一点。

例如，假设我们希望在用户键入了内容时做出反应，但我们不希望对每个输入事件都立即做出反应。 当他们快速输入时，我们只想等到暂停发生。 我们不是在事件处理程序中立即执行操作，而是设置一个超时。 我们还会清除之前的超时（如果有），以便当事件彼此靠近发生（比我们的超时延迟更近）时，之前事件的超时会被取消。

<textarea>Type something here...</textarea>
<script>
  let textarea = document.querySelector("textarea");
  let timeout;
  textarea.addEventListener("input", () => {
    clearTimeout(timeout);
    timeout = setTimeout(() => console.log("Typed!"), 500);
  });
</script>

将未定义的值赋予 clearTimeout 或在已经触发的超时上调用它没有任何影响。 因此，我们不必担心何时调用它，只需在每个事件中调用它即可。

如果我们想将响应间隔开来，使其至少间隔一定时间，但希望在事件序列期间触发它们，而不仅仅是在事件序列之后，我们可以使用稍微不同的模式。 例如，我们可能希望通过显示鼠标的当前坐标来响应 "mousemove" 事件，但每 250 毫秒只响应一次。

<script>
  let scheduled = null;
  window.addEventListener("mousemove", event => {
    if (!scheduled) {
      setTimeout(() => {
        document.body.textContent =
          `Mouse at ${scheduled.pageX}, ${scheduled.pageY}`;
        scheduled = null;
      }, 250);
    }
    scheduled = event;
  });
</script>

摘要

事件处理程序使我们可以检测和响应在网页中发生的事件。 addEventListener 方法用于注册这样的处理程序。

每个事件都有一个类型（"keydown"、"focus" 等）来标识它。 大多数事件是在特定 DOM 元素上调用的，然后传播到该元素的祖先，允许与这些元素关联的处理程序处理它们。

当事件处理程序被调用时，它会传递一个事件对象，其中包含有关事件的附加信息。 此对象还包含一些方法，允许我们停止进一步传播（stopPropagation）并阻止浏览器对事件的默认处理（preventDefault）。

按下键盘键会触发 "keydown" 和 "keyup" 事件。 按下鼠标按钮会触发 "mousedown"、"mouseup" 和 "click" 事件。 移动鼠标会触发 "mousemove" 事件。 触摸屏交互将导致 "touchstart"、"touchmove" 和 "touchend" 事件。

滚动可以通过 "scroll" 事件检测，焦点变化可以通过 "focus" 和 "blur" 事件检测。 当文档加载完毕时，"load" 事件会在窗口上触发。

练习

气球

编写一个页面，显示一个气球（使用气球表情符号 🎈）。 当您按下向上箭头时，它应该膨胀（增长） 10%。 当您按下向下箭头时，它应该收缩（缩小） 10%。

您可以通过设置其父元素的 font-size CSS 属性（style.fontSize）来控制文本（表情符号是文本）的大小。 请记住在值中包含一个单位，例如像素（10px）。

箭头键的键名分别是 "ArrowUp" 和 "ArrowDown"。 确保键只改变气球，不会滚动页面。

一旦您完成了这项工作，添加一个功能，如果气球膨胀到一定尺寸，它就会“爆炸”。 在这种情况下，“爆炸”意味着它被 💥 表情符号替换，并且事件处理程序被移除（因此您无法再膨胀或收缩爆炸）。

<p>🎈</p>

<script>
  // Your code here
</script>

鼠标轨迹

在 JavaScript 的早期，这是浮夸的首页和大量动画图像的鼎盛时期，人们想出了一些真正鼓舞人心的方法来使用这种语言。 其中之一就是鼠标轨迹 - 一系列元素，当您将鼠标指针移动到页面上时，这些元素会跟随鼠标指针。

在本练习中，我希望您实现一个鼠标轨迹。 使用绝对定位的 <div> 元素，并设置固定的尺寸和背景颜色（请参考“鼠标点击”部分中的代码作为示例）。 创建一堆这样的元素，并在鼠标移动时，将它们显示在鼠标指针的轨迹中。

这里有很多种可能的方法。 您可以使您的轨迹尽可能简单或尽可能复杂。 一个简单的解决方案是保持固定数量的轨迹元素，并在它们之间循环，每当 "mousemove" 事件发生时，将下一个元素移动到鼠标的当前位置。

<style>
  .trail { /* className for the trail elements */
    position: absolute;
    height: 6px; width: 6px;
    border-radius: 3px;
    background: teal;
  }
  body {
    height: 300px;
  }
</style>

<script>
  // Your code here.
</script>

标签

选项卡面板在用户界面中很常见。 它们允许您通过从多个“伸出”在元素上方的标签中选择来选择一个界面面板。

实现一个简单的选项卡界面。编写一个函数 `asTabs`，它接收一个 DOM 节点并创建一个选项卡界面，显示该节点的子元素。它应该在节点顶部插入一个 `<button>` 元素列表，每个子元素一个，包含从子元素的 `data-tabname` 属性中检索到的文本。除了一个之外，所有原始子元素都应该隐藏（设置 `display` 样式为 `none`）。当前可见的节点可以通过单击按钮来选择。

当它工作时，扩展它以对当前选定选项卡的按钮进行样式设置，使其明显地显示哪个选项卡被选中。

<tab-panel>
  <div data-tabname="one">Tab one</div>
  <div data-tabname="two">Tab two</div>
  <div data-tabname="three">Tab three</div>
</tab-panel>
<script>
  function asTabs(node) {
    // Your code here.
  }
  asTabs(document.querySelector("tab-panel"));
</script>