COMP3512
winter 2023
lec-19
the
doneometer
what's ahead?
⚠️
⚠️
⚠️
some common event scenarios
- you want something to happen when the page loads
- you want to affect the DOM element that "hears" the event
- 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
lec-19
By Jordan Pratt
lec-19
2023-03-20: more event handling, preventDefault(), stopPropagation(), event delegation, dataset property
