Notes

Common Page Events

Handling a button click event

window.addEventListener("DOMContentLoaded", (event) => {
  const button = document.getElementById("increment-count");
  const count = document.getElementById("clicked-count");
  let clicks = 0;
  button.addEventListener("click", (event) => {
    clicks += 1;
    count.innerHTML = clicks;
  });
});

Using addEventListener() vs onclick

Handling a checkbox check event

<html>
  <head>

    <script async defer src="script.js">
=======
    <script src="script.js">
>>>>>>> faa6aaf237eae4895460e74eebaa130feb27079a
  </head>
<!--------------------------------------------------------------------------------------------------->
<!--------------------------------------------------------------------------------------------------->
<!--------------------------------------------------------------------------------------------------->
<!--------------------------------------------------------------------------------------------------->
<!--------------------------------------------------------------------------------------------------->


<!--------------------------------------------------------------------------------------------------->
<!--------------------------------------------------------------------------------------------------->
<!--------------------------------------------------------------------------------------------------->
<!--------------------------------------------------------------------------------------------------->
<!--------------------------------------------------------------------------------------------------->


  <body>
    <h1>Pizza Toppings</h1>
    <input type="checkbox" id="on-off">
    <label for="on-off">Extra Cheese</label>
    <div id="now-you-see-me" style="display:none">Add $1.00</div>
  </body>
</html>
window.addEventListener("DOMContentLoaded", (event) => {
  const checkbox = document.getElementById("on-off");
  const divShowHide = document.getElementById("now-you-see-me");
  checkbox.addEventListener("click", (event) => {
    if (checkbox.checked) {
      divShowHide.style.display = "block";
    } else {
      divShowHide.style.display = "none";
    }
  });
});
window.onload = () => {
  const checkbox = document.getElementById("on-off");
  const divShowHide = document.getElementById("now-you-see-me");
  checkbox.addEventListener("click", (event) => {
    if (checkbox.checked) {
      divShowHide.classList.remove("hide");
      divShowHide.classList.add("show");
    } else {
      divShowHide.classList.remove("show");
      divShowHide.classList.add("hide");
    }
  });
};
.show {
  display: block;
}
.hide {
  display: none;
}

Handling a user input value

window.addEventListener("DOMContentLoaded", (event) => {
  const stopCyanMadness = () => {
    const inputValue = document.getElementById("stopper").value;
    if (inputValue !== "STOP") {
      document.body.style.backgroundColor = "cyan";
    }
  };
  setTimeout(stopCyanMadness, 5000);
});

Input Focus and Blur Events

Event Handling: Input Focus and Blur

Listening for focus and blur events

window.addEventListener("DOMContentLoaded", (event) => {
  const input = document.getElementById("fancypants");

  input.addEventListener("focus", (event) => {
    event.target.style.backgroundColor = "#E8F5E9";
  });
  input.addEventListener("blur", (event) => {
    event.target.style.backgroundColor = "initial";
  });
});

Form Validation

Event Handling: Form Validation Validate passwords before submitting a form

<html>
  <head>

    <script async defer src="script.js">
=======
    <script src="script.js">
>>>>>>> faa6aaf237eae4895460e74eebaa130feb27079a
  </head>
<!--------------------------------------------------------------------------------------------------->
<!--------------------------------------------------------------------------------------------------->
<!--------------------------------------------------------------------------------------------------->
<!--------------------------------------------------------------------------------------------------->
<!--------------------------------------------------------------------------------------------------->


<!--------------------------------------------------------------------------------------------------->
<!--------------------------------------------------------------------------------------------------->
<!--------------------------------------------------------------------------------------------------->
<!--------------------------------------------------------------------------------------------------->
<!--------------------------------------------------------------------------------------------------->


  <body>
    <form class="form form--signup" id="signup-form">
      <input class="form__field" id="name" type="text" placeholder="Name" style="display:block">
      <input class="form__field" id="email" type="text" placeholder="Email" style="display:block">
      <input class="form__field" id="password" type="text" placeholder="Password" style="display:block">
      <input class="form__field" id="confirm-password" type="text" placeholder="Password" style="display:block">
      <button class="form__submit" id="submit" type="submit">Submit</button>
    </form>
  </body>
</html>
window.addEventListener("DOMContentLoaded", (event) => {
  const form = document.getElementById("signup-form");
  const checkPasswordMatch = (event) => {
    const passwordValue = document.getElementById("password").value;
    const passwordConfirmValue = document.getElementById("confirm-password")
      .value;
    if (passwordValue !== passwordConfirmValue) {
      event.preventDefault();
      alert("Passwords must match!");
    } else {
      alert("The form was submitted!");
    }
  };
  form.addEventListener("submit", checkPasswordMatch);
});

Drag and Drop API

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Red Square is a Drag</title>
  <script type="text/javascript">
    const handleDragStart = e => {
      e.target.classList.add('is-being-dragged');
      e.dataTransfer.setData('text/plain', e.target.id);
      e.dataTransfer.dropEffect = 'move';
    };

    const handleDragEnter = e => {
      // Needed so that the "drop" event will fire.
      e.preventDefault();
      e.target.classList.add('is-active-drop-zone');
    };

    const handleDragLeave = e => {
      e.target.classList.remove('is-active-drop-zone');
    };

    const handleDragOver = e => {
      // Needed so that the "drop" event will fire.
      e.preventDefault();
    };

    const handleDrop = e => {
      const id = e.dataTransfer.getData('text/plain');
      const draggedElement = document.getElementById(id);
      draggedElement.draggable = false;
      e.target.appendChild(draggedElement);
    };

    window.addEventListener('DOMContentLoaded', () => {
      document
        .getElementById('red-square')
        .addEventListener('dragstart', handleDragStart);

      const dropZone = document.getElementById('drop-zone');
      dropZone.addEventListener('drop', handleDrop);
      dropZone.addEventListener('dragenter', handleDragEnter);
      dropZone.addEventListener('dragleave', handleDragLeave);
      dropZone.addEventListener('dragover', handleDragOver);
    });
  </script>
  <style>
    #drop-zone {
      align-items: center;
      border: 1px solid #DDD;
      color: #CCC;
      display: flex;
      font-family: Arial, Helvetica, sans-serif;
      font-size: 2em;
      font-weight: bold;
      height: 200px;
      justify-content: center;
      position: absolute;
      right: 0;
      top: 100px;
      width: 200px;
    }

    #red-square {
      background-color: red;
      box-sizing: border-box;
      height: 100px;
      width: 100px;
    }

    .is-being-dragged {
      opacity: 0.5;
      border: 8px dashed white;
    }

    .is-active-drop-zone {
      background-color: blue;
      color:
    }
  </style>
  </style>
</head>
<!--------------------------------------------------------------------------------------------------->
<!--------------------------------------------------------------------------------------------------->
<!--------------------------------------------------------------------------------------------------->
<!--------------------------------------------------------------------------------------------------->
<!--------------------------------------------------------------------------------------------------->


<!--------------------------------------------------------------------------------------------------->
<!--------------------------------------------------------------------------------------------------->
<!--------------------------------------------------------------------------------------------------->
<!--------------------------------------------------------------------------------------------------->
<!--------------------------------------------------------------------------------------------------->


<body>
  <div id="red-square" draggable="true"></div>
  <div id="drop-zone">drop zone</div>
</body>
</html>

Click Events with Targets

Use event.target to console.log the ID of a clicked div

<html>
  <head>
    <link rel="stylesheet" type="text/css" href="example.css" />
    <script type="text/javascript" src="example.js"></script>
  </head>
<!--------------------------------------------------------------------------------------------------->
<!--------------------------------------------------------------------------------------------------->
<!--------------------------------------------------------------------------------------------------->
<!--------------------------------------------------------------------------------------------------->
<!--------------------------------------------------------------------------------------------------->


<!--------------------------------------------------------------------------------------------------->
<!--------------------------------------------------------------------------------------------------->
<!--------------------------------------------------------------------------------------------------->
<!--------------------------------------------------------------------------------------------------->
<!--------------------------------------------------------------------------------------------------->


  <body>
    <div id="div-1" class="box">1</div>
    <div id="div-2" class="box">2</div>
    <div id="div-3" class="box">3</div>
    <div id="div-4" class="box">4</div>
    <div id="div-5" class="box">5</div>
    <div id="div-6" class="box">6</div>
    <div id="div-7" class="box">7</div>
    <div id="div-8" class="box">8</div>
    <div id="div-9" class="box">9</div>
    <div id="div-10" class="box">10</div>
  </body>
</html>
.box {
  border: 2px solid gray;
  height: 50px;
  width: 50px;
  margin: 5px;
}
window.addEventListener("DOMContentLoaded", (event) => {
  document.body.addEventListener("click", (event) => {
    console.log(event.target.id);
  });
});

The Bubbling Principle

What is the bubbling princple? The Bubble Principle means that when an event happens on an element, it first runs the handlers on it, then on it's parent, then all the way up on other ancestors.

<html>
  <body>
    <main>
      <div>
        <p>This is a paragraph in a div in a main in a body in an html</p>
      </div>
    </main>

    <script async>
      function handler(e) {
        console.log(e.currentTarget.tagName);
      }
      document.querySelector("main").addEventListener("click", handler);
      document.querySelector("div").addEventListener("click", handler);
      document.querySelector("p").addEventListener("click", handler);
    </script>
  </body>
</html>

Stopping Event bubble with stopPropogation()

document.querySelector("video").addEventListener("click", (event) => {
  event.stopPropagation();
  video.play();
});

Event Delegation

<ul id="my-list">
  <li>This is list item 1.</li>
  <li>This is list item 2.</li>
  <li>This is list item 3.</li>
  <li>This is list item 4.</li>
  <li>This is list item 5.</li>
</ul>
<script async>
  document
    .getElementById('my-list')
    .addEventListener('click', e => {
      console.log(e.target.innerHTML);
      console.log(e.currentTarget.id);
    });
</script>