Categories:

Putting it to use

Ok, so now you can boast to your fellow scripters that you can get the event object in NS without passing arguments, but when they ask what's the big deal, what can you say? Well, you can't really do anything more than before, but you can make your scripts more foolproof. Here's an example:

function bgChange(layer,bgc) {
if (layer.style) layer.style.backgroundColor=bgc;
else layer.bgColor=bgc;
}

Now, we give this function to thousands of copy-pasters around the Internet, to make it work they would have to:

<ilayer><layer onmouseover="bgChange(this,'green')" onmouseout="bgChange(this,'white')"><span onmouseover="bgChange(this,'green')" onmouseout="bgChange(this,'white')">BG Color Change</span></layer></ilayer>

Now, that doesn't seem like a big deal, does it? Hold up a minute though, let's apply our newfound knowledge of events:

function bgChange(bgc) {
if (!window.event) event=arguments.callee.caller.arguments[0];
var layer=event.srcElement || event.currentTarget || event.target;
if (layer.style) layer.style.backgroundColor=bgc;
else layer.bgColor=bgc;
}

<ilayer><layer onmouseover="bgChange('green')" onmouseout="bgChange('white')"><span onmouseover="bgChange('green')" onmouseout="bgChange('white')">BG Color Change</span></layer></ilayer>

Example:

BG Color Change

Hey, we eliminated the need to pass an argument to reference the layer! We obtained it via:

var layer=event.srcElement || event.currentTarget || event.target;

event.srcElement is for IE4+, event.currentTarget is for Gecko-based browsers, and event.target is for NS4. They refer to the node the event originated from. The reason for the || operator is a thing called "short-circuit validation" which I won't get into here, but trust me, it works.

The only argument we passed to was declare the new bgcolor. For newbies, this could mean a world of difference, firstly less code for them to type out, but more importantly less things for them to remember. It is much easier to remember to just pass a single color argument, instead of pass this, then pass the color, etc. Obviously this doesn't add much functionality, but nevertheless, it is some food for thought.

This tutorial was written and contributed by Jason Davis, a 15 year old who enjoys all sorts of scripting languages. Apart from acting as a moderator on the JK Forum. Jason Davis also is for hire as a freelance web designer, when he is not too busy with high school.