測試你的技能：事件

這個技能測試的目的是評估你是否理解了我們的 事件介紹 文章。

注意： 你可以透過下載程式碼並將其放入線上編輯器（例如 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 屬性中包含的顏色。

我們希望你不用迴圈遍歷所有按鈕，併為每個按鈕設定自己的事件監聽器來解決這個問題。

嘗試更新下面的即時程式碼，以重新建立完成的示例

下載此任務的起點，以便在您自己的編輯器或線上編輯器中工作。