JavaScript/處理 DOM 事件/練習

主題：事件處理

我們使用以下 HTML 頁面進行練習。

<!DOCTYPE html>
<html>
<head>
  <script>
  function registerAllEvents() {
    // ..
  }
  </script>
  <style>
   .container {
      display: grid;
      grid-template-columns: 49% 49%;
      grid-template-rows:    10em 10em;
      gap: 1%;
      background-color: AliceBlue;
      margin: 2em;
      padding: 2em;
    }
    .cell {
      display: flex;
      align-items: center;
      justify-content: center;
      background-color: blue;
      font-size: 3em;
    }
  </style>
</head>

<body id="body" onload="registerAllEvents()">
  <div class="container">
    <div id="divA" class="cell">A</div>
    <div id="divB" class="cell">B</div>
    <div id="divC" class="cell">C</div>
    <div id="divD" class="cell">D</div>
</body>
</html>

1. 實現一個“點選”事件處理程式，它在“A”區域的背景顏色之間切換，“銀色”和“金色”。

點選檢視解決方案

  function registerAllEvents() {
    document.getElementById("divA").addEventListener('click', handleDivA);
  }

  function handleDivA(evt) {
    // toggle between silver and gold
    const elem = evt.target;
    if (elem.style.backgroundColor !== 'silver') {
      elem.setAttribute("style", "background-color: silver");
    } else {
      elem.setAttribute("style", "background-color: gold");
    }
  }

2. 實現一個“滑鼠懸停”事件處理程式。每次滑鼠在“B”區域移動時，其背景顏色從“藍色”變為“青色”、“紅色”、“黃色”、“綠色”，然後回到“藍色”。

點選檢視解決方案

  function registerAllEvents() {
    document.getElementById("divB").addEventListener('mousemove', handleDivB);    
  }

  function handleDivB(evt) {
    // rotate in a palette of colors
    const elem = evt.target;
    switch (elem.style.backgroundColor) {
      case "blue":
        elem.setAttribute("style", "background-color: lime");
        break;
      case "lime":
        elem.setAttribute("style", "background-color: red");
        break;
      case "red":
        elem.setAttribute("style", "background-color: yellow");
        break;
      case "yellow":
        elem.setAttribute("style", "background-color: green");
        break;
      default:
        elem.setAttribute("style", "background-color: blue");
        break;
    }
  }

3. 為“C”區域實現兩個事件處理程式，“滑鼠進入”和“滑鼠離開”。當滑鼠指標進入該區域時，其背景顏色變為“紅色”；當它離開該區域時，其背景顏色變為“綠色”。

點選檢視解決方案

  function registerAllEvents() {
    // two event handlers for the same element
    document.getElementById("divC").addEventListener('mouseenter', handleDivC_1);
    document.getElementById("divC").addEventListener('mouseleave', handleDivC_2);
  }

  function handleDivC_1(evt) {
    // switch to a certain color
    evt.target.setAttribute("style", "background-color: red");
  }
  function handleDivC_2(evt) {
    // switch to a certain color
    evt.target.setAttribute("style", "background-color: green");
  }

4. 將上述 3 個解決方案整合在一起。我們將有一個頁面，它對 4 種不同的事件型別做出反應。

點選檢視解決方案

  function registerAllEvents() {

    // register different event types

    document.getElementById("divA").addEventListener('click', handleDivA);
    document.getElementById("divB").addEventListener('mousemove', handleDivB);    

    // two event handler for the same element
    document.getElementById("divC").addEventListener('mouseenter', handleDivC_1);
    document.getElementById("divC").addEventListener('mouseleave', handleDivC_2);
  }

  function handleDivA(evt) {
    // toggle between silver and gold
    const elem = evt.target;
    if (elem.style.backgroundColor !== 'silver') {
      elem.setAttribute("style", "background-color: silver");
    } else {
      elem.setAttribute("style", "background-color: gold");
    }
  }

  function handleDivB(evt) {
    // rotate in a palette of colors
    const elem = evt.target;
    switch (elem.style.backgroundColor) {
      case "blue":
        elem.setAttribute("style", "background-color: lime");
        break;
      case "lime":
        elem.setAttribute("style", "background-color: red");
        break;
      case "red":
        elem.setAttribute("style", "background-color: yellow");
        break;
      case "yellow":
        elem.setAttribute("style", "background-color: green");
        break;
      default:
        elem.setAttribute("style", "background-color: blue");
        break;
    }
  }

  function handleDivC_1(evt) {
    // switch to a certain color
    evt.target.setAttribute("style", "background-color: red");
  }
  function handleDivC_2(evt) {
    // switch to a certain color
    evt.target.setAttribute("style", "background-color: green");
  }