JavaScript/Handling DOM events/Exercises
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'.
Click to see solution
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".
Click to see solution
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".
Click to see solution
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.
Click to see solution
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"); }