An Example for Using Event Listeners

Here is an example of a DIV element that includes colored text in a colored box. The main function is the init() function. It computes the DIV object by getElementById(), and then defines two event listeners. The first one listens for a "mouseover" event, while the other one listens for a "mouseout" event. Here is the init() function:

function init() {
  demoObj = document.getElementById("demoDiv");
  demoObj.addEventListener("mouseover", colorItTan, false);
  demoObj.addEventListener("mouseout", colorItYellow, false);
}

Notice the action taken for each event. We call colorItTan for the "mouseover" event, and colorItYellow for the other one. Here is a full listing of the HTML and JavaScript code:

<DIV ID="demoDiv" STYLE="position:relative; left:100px; top:20px;
width:120px; height:25px; color:blue; background-color:yellow;"
>Mouse over me!</DIV>
<SCRIPT LANGUAGE="JavaScript">
<!--
var demoObj;
function init() {
  demoObj = document.getElementById("demoDiv");
  demoObj.addEventListener("mouseover", colorItTan, false);
  demoObj.addEventListener("mouseout", colorItYellow, false);
}

function colorItTan() {
  demoObj.style.backgroundColor = "tan";
}

function colorItYellow() {
  demoObj.style.backgroundColor = "yellow";
}

onload = init;
// -->
</SCRIPT>

Get on Netscape 6 browser and play with this demo.

Next: How to use the e object in a real example