January 2, 2001 - Netscape 6 Event Handler Specification | WebReference

January 2, 2001 - Netscape 6 Event Handler Specification

Yehuda Shiran January 2, 2001
Netscape 6 Event Handler Specification
Tips: January 2001

Yehuda Shiran, Ph.D.
Doc JavaScript

Netscape 6 event model is based on the event listener. You attach an event listener with the addEventListener() method. Here is an example of a DIV element that includes a 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 the full listing of the HTML and JavaScript code:

<DIV ID="demoDiv" STYLE="position:relative; left:100px; top:20px; width:100px; 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 the Netscape 6 browser and play with this demo.