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");
  }