COMP3512

winter 2023

lec-19

the

doneometer

what's ahead?

⚠️

⚠️

⚠️

some common event scenarios

  1. you want something to happen when the page loads
  2. you want to affect the DOM element that "hears" the event
  3. you want to affect DOM element B when element A "hears" an event

you want something to happen when the page loads

scenario 1

When we say "do something after the page loads", we almost always really mean "do something after the page's DOM has completed loading".

🤔Why are we so concerned with the DOM being available?

BTW, this IS an event!

you want something to happen when the page loads

scenario 1

Before type="module" became widely supported in the browser, doing this was kind of painful.

DEMO
1-dom-content-loaded

you want something to happen when the page loads

scenario 1

<!DOCTYPE html>
<html lang="en">
  <head>
    <script src="index.js"></script>
    <title>lec-19</title>
  </head>
  <body>
    <div id="container">
      <h1>lec-19</h1>
    </div>
  </body>
</html>

no module

you want to affect the DOM element that "hears" the event

scenario 2

This is very common and what we encountered last week.

🤔What way have we used to refer to the "hearing" element?

🤔What sort of things can we do with the "hearing" element?

you want to affect the DOM element that "hears" the event

scenario 2

DEMO
2-event-target

BRAIN
BREAK

you want to affect DOM element B when element A "hears" an event

scenario 3

Also very common!

🤔Where do we see this kind of behaviour in The Project?

you want to affect DOM element B when element A "hears" an event

scenario 3

DEMO
3-tasty-dataset

you want to affect DOM element B when element A "hears" an event

scenario 3

<!DOCTYPE html>
<html lang="en">
  <head>
    <script type="module" src="index.js"></script>
    <link rel="stylesheet" href="index.css" />
    <title>3-tasty-dataset</title>
  </head>
  <body>
    <ul>
      <li data-taste="sweet" data-code="sw">sweet</li>
      <li data-taste="salty" data-code="sa">salty</li>
      <li data-taste="sour" data-code="sr">sour</li>
    </ul>
    <div id="taste"></div>
    <div id="code-display"></div>
    <div id="images"></div>
  </body>
</html>

what's up here?

dataset properties are useful!

you want to affect DOM element B when element A "hears" an event

scenario 3

what's up here?

event delegation for the win

import { foodJSON } from "./data.js";

const foods = JSON.parse(foodJSON);

document.querySelector("ul").addEventListener("click", (e) => {
  if (e.target.nodeName === "LI") {
    let code = e.target.dataset.code;
    let taste = e.target.dataset.taste;

    document.querySelector("#code-display").textContent = code;
    document.querySelector("#taste").textContent = taste;

    let foodImgs = imagesMatching(code);
    document.querySelector("#images").replaceChildren();
    document.querySelector("#images").append(...foodImgs);
  }
});

function imagesMatching(code) {
  let matchingFoods = foods.filter((food) => food.tasteCode === code);

  return matchingFoods.map((food) => {
    let img = document.createElement("img");
    img.src = `https://placehold.co/100x100?text=${food.name}`;
    img.dataset.code = food.tasteCode;
    return img;
  });
}

tut-10 gives you more practice with event delegation

2 quick(ish) asides

While not necessary for The Project, the following 2 things will likely be in Web 3 and things you'll see in the wild.

stopPropagation()
DEMO
4-stop-propagation

stopPropagation()
<!DOCTYPE html>
<html lang="en">
  <head>
    <link rel="stylesheet" href="index.css" />
    <script type="module" src="index.js"></script>
    <title>Document</title>
  </head>
  <body>
    <div id="outer">
      <div id="inner">
        <h1>A <span>SPAN</span> In It</h1>
      </div>
    </div>
    <div id="next-to">next to</div>
  </body>
</html>

Draw this as:

1. nested boxes, and

2. a DOM tree

🤔If SPAN is clicked, what happens to that click event?

🤔What is that called again?

preventDefault()
DEMO
5-prevent-default
Made with Slides.com