InterActive DHTML Tutorial 15

DHTML Tutorial 15
Adding Events to our cross browser DOM

In the previous two lessons we learned about capturing events. We saw that capturing and releasing events is handled differently in the two major browser types. Yet another pain in the neck with the browser difference, eh? In this lesson, we'll add some functions to our dom.js file to make it easier to do write webpages with event capturing for BOTH Netscape and Internet Explorer.

First, open up your dom.js. In case you don't have it, here it is again:

dom.js so far:

If you haven't already, save this as dom.js

We're going to add two functions to dom.js, one called catchEvent and one called letgoEvent. 'catchEvent' will capture our events (like Netscape's captureEvent), and of course 'letgoEvent' will release our events (like releaseEvents in Netscape. These functions need to be able to take an object's ID, an event type, and a function to call as parameters so that when we use the function we can capture the event we want on the object we want and call the function we want.

My big plan here is to go ahead and give you the code for the new dom.js, then give you an example of using it and finally for hearty people I'll break it down and explain what the different parts are doing. Sound okay? (please say YES) ;o).....good!

Here is the code of the dom.js with the event capturing and release functions (the new functions are in blue and red:

Type the following code into CodeRunner and save it as dom.js

nav = document.layers; IE4 = document.all; isNav4 = (nav) ? true : false; isIE4 = (IE4) ? true : false; if(isNav4){ function allobj(ID){ this.style = document.layers[ID]; } document.all = new Array(); } function init(){ if(isNav4){ end = document.layers.length; for(i=0; i < end; i++){ id = document.layers[i].name; document.all[id] = new allobj(id); } } } function catchEvent(id,event_type,function_name){ if (isNav4){ event_to_capture = "Event." + event_type.toUpperCase(); if(id=="document"){ dom = document; eval("document.captureEvents(" + event_to_capture + ")"); }else{ dom = document.layers[id]; eval("document.layers['" + id + "'].captureEvents(" + event_to_capture + ")"); } } else if(isIE4){ if(id == "document"){ dom = document; }else{ dom = document.all[id]; } } temp_event = "on" + event_type.toLowerCase(); dom[temp_event] = eval(function_name); } function letgoEvent(id,event_type,function_name){ if (isNav4){ dom = document.layers[id]; } else if(isIE4){ dom = document.all[id]; } temp_event = "on" + event_type.toLowerCase(); dom[temp_event] = null; }

Be sure and save this as dom.js we're gonna use it right away.

Now let's see how we can use this to our advantage. Below is a web page that uses this new dom.js by calling the catchEvent function.

<head> <script src="dom.js"></script> </head> <body onload="setTimeout('init()',900);"> <span id='scott' style="position:absolute; top:30; left:40; background-color:cccccc; color:black;">click here</span> <span id='themenu' style="position:absolute; top:100; left:140; width:80; height:100; background-color:cccccc; color:black; visibility:hidden;"> You see it works! </span> </body> <script> function showme(){ document.all['themenu'].style.visibility = 'visible'; } setTimeout("catchEvent('scott','mousedown','showme')",900); </script>

Preview this and click on click here. Try it on both MSIE and Netscape. Should work on both.

Description of dom.js event capturing and releasing

Since the goal here is to make it easier to make event capturing work for both browsers we are forced to make functions similar to Netscape's captureEvents and releaseEvents functions, but now they'll capture events for MSIE.

Both catchEvent and letgoEvent take three arguments as parameters: id, event_type, and function_name. The id is the id of the object capturing the event, it can either be the actual id or the name of the object (for instance it can be document if you want the document to caputure the event, or it can be the id name of a Stylesheet or layer). The event_type is of course the name of the vent to capture (for instance mousedown or click or focus, etc.). Finally, function_name is the name of the function to execute upon the capture of the event.

Now let's take a closer look at the catchEvent. Below is a copy of the function for use to look at:

Observe the following:

Looking at the code above you'll see that if the browser is Netscape, then it converts the event_type to a an event object and stores it in event_to_capture . For instance, if the event_type is click then event_to_capture would become Event.CLICK (notice in the code we used the toUpperCase method). Then we decide whether or now the id is document or not. If it is document then we use the captureEvents method on the document, if not, then we use the captureEvents method on the object with with the id that was passed as a parameter. Also, the dom variable becomes document.layer[id].

In the case of MSIE we only need to know whether to set the dom variable to document or document.all[id].

In both cases, we need to call the right function using a statement like document.onmouseover = functionname; which is what following lines do:

temp_event = "on" + event_type.toLowerCase();
dom[temp_event] = eval(function_name);

In the next lesson we'll see more examples of using the catchEvent and letgoEvent functions. See you there.