测试你的技能：事件

这个技能测试的目的是评估你是否理解了我们的 事件介绍 文章。

注意： 你可以通过下载代码并将其放入在线编辑器（例如 CodePen、JSFiddle 或 Glitch）来尝试解决方案。如果有错误，它将记录在页面上的结果面板或浏览器的 JavaScript 控制台中，以帮助你。

如果你遇到困难，可以在我们的 沟通渠道 中联系我们。

DOM 操作：被认为有用

以下的一些问题需要你编写一些 DOM 操作代码来完成它们——例如创建新的 HTML 元素、将它们的文本内容设置为等于特定字符串值，并将它们嵌套在页面上现有的元素中——所有这些都通过 JavaScript 完成。

我们还没有在课程中明确地教授过这一点，但你已经看到了一些使用它的例子，我们希望你能研究一下你需要哪些 DOM API 来成功回答这些问题。一个好的起点是我们的 操作文档 教程。

事件 1

在我们第一个与事件相关的任务中，你需要创建一个简单的事件处理程序，当点击按钮 (btn) 时，它会使按钮内部的文本发生改变，当再次点击时，它会恢复原状。

HTML 不应该被修改；只需要修改 JavaScript。

尝试更新下面的实时代码，以重新创建完成的示例

下载此任务的起点，以便在您自己的编辑器或在线编辑器中工作。

事件 2

现在我们来看看键盘事件。为了通过这个评估，你需要构建一个事件处理程序，当按下键盘上的 WASD 键时，它会将圆圈移动到提供的画布周围。圆圈是用函数 drawCircle() 绘制的，该函数将以下参数作为输入

  • x — 圆圈的 x 坐标。
  • y — 圆圈的 y 坐标。
  • size — 圆圈的半径。

尝试更新下面的实时代码，以重新创建完成的示例

下载此任务的起点，以便在您自己的编辑器或在线编辑器中工作。

事件 3

在下一个与事件相关的任务中，你需要在 <button> 的父元素 (<div class="button-bar"> … </div>) 上设置一个事件监听器，当通过点击任何按钮调用该监听器时，它会将 button-bar 的背景设置为按钮的 data-color 属性中包含的颜色。

我们希望你不用循环遍历所有按钮，并为每个按钮设置自己的事件监听器来解决这个问题。

尝试更新下面的实时代码，以重新创建完成的示例

下载此任务的起点，以便在您自己的编辑器或在线编辑器中工作。