Netscape 6, Part III: The Event Model: An Example for Using Event Listeners - Doc JavaScript

Netscape 6, Part III: The Event Model

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

Produced by Yehuda Shiran and Tomer Shiran
All Rights Reserved. Legal Notices.
Created: January 1, 2001
Revised: January 1, 2001

URL: https://www.webreference.com/js/column74/5.html