411 REFERENCE · Wikibooks
JavaScript/Handling DOM events/Exercises
Reference material by Wikibooks contributors. This retains its source identity and is not 411 news reporting.
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'.
100% 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".
100% 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".
100% 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.
100% 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");
}