JavaScript/Handling DOM events/Exercises

Topic: Event handling

We use the following HTML page for the exercises.

<!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. Implement a 'click' event handler that toggles the 'A' area between the background colors 'silver' and 'gold'.

Click to see solution

  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. Implement a 'mouseover' event handler. With each mouse movement on the 'B' area its background color changes from "blue" to "lime", "red", "yellow", "green", and back to "blue".

Click to see solution

  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. Implement two event handlers for the 'C' area, 'mouseenter' and 'mouseleave'. When the mouse pointer enters the area, its background color changes to "red"; when it leaves the area, its background color changes to "green".

Click to see solution

  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. Bring the above 3 solutions together. We will have a page that reacts on 4 different event types.

Click to see solution

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