handling event changes

1<p>This page turns violet when you hold the V key.</p>
2<script>
3  window.addEventListener("keydown", event => {
4    if (event.key == "v") {
5      document.body.style.background = "violet";
6    }
7  });
8  window.addEventListener("keyup", event => {
9    if (event.key == "v") {
10      document.body.style.background = "";
11    }
12  });
13</script>

1<button>Click me any way you want</button>
2<script>
3  let button = document.querySelector("button");
4  button.addEventListener("mousedown", event => {
5    if (event.button == 0) {
6      console.log("Left button");
7    } else if (event.button == 1) {
8      console.log("Middle button");
9    } else if (event.button == 2) {
10      console.log("Right button");
11    }
12  });
13</script>

1<p>Press Control-Space to continue.</p>
2<script>
3  window.addEventListener("keydown", event => {
4    if (event.key == " " && event.ctrlKey) {
5      console.log("Continuing!");
6    }
7  });
8</script>

1<a href="https://developer.mozilla.org/">MDN</a>
2<script>
3  let link = document.querySelector("a");
4  link.addEventListener("click", event => {
5    console.log("Nope.");
6    event.preventDefault();
7  });
8</script>

1<button>Act-once button</button>
2<script>
3  let button = document.querySelector("button");
4  function once() {
5    console.log("Done.");
6    button.removeEventListener("click", once);
7  }
8  button.addEventListener("click", once);
9</script>