Events - Beginning JavaScript - page 297

document.addEventListener("mouseover", handleEvent);
document.addEventListener("mouseout", handleEvent);
document.addEventListener("click", handleEvent);
The function begins by declaring a variable called target , which is initialized with the event object's
target property:
function handleEvent(e) {
var target = e.target;
Now you need to determine what type of event took place and make the appropriate changes to the DOM.
A switch statement works well here, and you use the event object's type property as the switch expression:
switch (e.type) {
case "mouseover":
if (target.className == "tabStrip-tab") {
target.className = "tabStrip-tab-hover";
}
break;
First, check for the mouseover event. If the element that caused the event has a class name of
tabStrip‐tab , a tab in its normal state, change the element's className property to
tabStrip‐tab‐hover . In doing so, the tab is now in the hover state.
If a mouseout event occurred, you also need to make changes to the DOM:
case "mouseout":
if (target.className == "tabStrip-tab-hover") {
target.className = "tabStrip-tab";
}
break;
This code changes the tab's className property to tabStrip‐tab (the normal state) only when the tab
in which the mouse pointer exited is in the hover state.
The last event you need to look for is the click event, so check for it now with the following code:
case "click":
if (target.className == "tabStrip-tab-hover") {
target.className = "tabStrip-tab-click";
This code changes the tab element's className to tabStrip‐tab‐click , thus putting it into the click state.
Next, you need to add the tab's description to the page, and you start this process by getting the tab's
number from the <div/> element's data‐tab‐number attribute. You use the getAttribute() method to
retrieve this value:
var num = target.getAttribute("data-tab-number");
showDescription(num);
}
break;
}
}