jscheuer1

In javascript there are basically two types of events that can be assigned to elements and objects. I classify them as version 4 events (those that were available in Netscape 4 and IE 4), and version 5 events, those that became available starting with IE 5 and presumably NS 5, but the earliest I'm aware of them in NS was NS 6 (I don't recall ever seeing a NS 5 browser).

Version 4 events are still available in today's browsers and are usually the first ones folks learn about, examples:

1. Code:

   <a href="somepage.htm" onclick="alert(this.href);">Some Page</a>

2. Code:

   <a id="myid" href="somepage.htm">Some Page</a>
   <script type="text/javascript">
   document.getElementById('myid').onclick = function(){alert(this.href);};
   </script>

These both have the same effect. When one clicks on the link it will alert its href and then switch to the somepage.htm page. If we want them to stay on the current page and not switch, we can add a return false:

Code:

<a id="myid" href="somepage.htm">Some Page</a>
<script type="text/javascript">
document.getElementById('myid').onclick = function(){alert(thiis.href); return false;};
</script>

Here's an example of the same thing as a version 5 event:

Code:

<a id="myid" href="somepage.htm">Some Page</a>
<script type="text/javascript">
document.getElementById('myid').addEventListener('click', function(e){alert(this.href); e.preventDefault();}, false);
</script>

It's also know as the standard event model and e in this case represents the event. Instead of return false, we prevent the event's default as shown.

It works in all currently used browsers except for IE 8 and less, which use a different syntax that uses a a global event object called event and doesn't use a function to set the return action and doesn't pass the element to its function as 'this'. It can be made to do that though via the use of call(), and we can use its event's returnValue property to set the return. so adding that to what we already had:

Code:

<a id="myid" href="somepage.htm">Some Page</a>
<script type="text/javascript">
var el = document.getElementById('myid');
function myclick(e){
	e = e || event;
	alert(this.href);
	if(e.preventDefault){e.preventDefault();}
	e.returnValue = false;
}
if (el.addEventListener){
	el.addEventListener('click', myclick, false);
}
else if (el.attachEvent){
	el.attachEvent('onclick', function(){myclick.call(el);});
}
</script>

An advantage of doing it this way is that even if the element already had an onclick (whether version 4 or 5), this will be added to it instead of overwriting it. And even if another script comes along later and adds a version 4 event to it, ours will still be there. Because of that most advanced scripts use it so as not to interfere with or be interfered with by any events already assigned on the page. It's particularly helpful when adding an onload or load event to the page, it won't interfere with any existing ones for the page.

A disadvantage is that we cannot read the event. With a version 4 event we could do:

Code:

alert(document.getElementById('myid').onclick);

and it would tell us the event, like for #1 or #2 at the beginning of this article, it would say:

function click(){alert(this.href);}

But our version 5 edition of that same event will alert null or perhaps some other falsey value like undefined or nothing at all. The only information we can glean from it is if we add and/or attach another click event to it. Then during the execution of the added event we can query whether or not it has been defaultPrevented or has a returnValue of false.

With the standard event model this is simple:

Code:

el.addEventListener('click', function(e){alert(e.defaultPrevented);}, false);

But with IE less than 9 we need to:

Code:

el.attachEvent('onclick', function(){alert(event.returnValue);});

To make matters more complicated, in the standard event model we simply have to add this new event after the one we want to know about. However, in IE less than 9 we must add it before, as the events in IE less than 9 get executed in reverse order to that in which they were assigned. (The documentation says it's a random order, but in my experience it's simply 'last in first out', at least in most cases). So we can do:

Code:

<a id="myid" href="somepage.htm">Some Page</a>
<script type="text/javascript">
var el = document.getElementById('myid');
function myclick(e){
	e = e || event;
	alert(this.href);
	if(e.preventDefault){e.preventDefault();}
	e.returnValue = false;
}
if (el.addEventListener){
	el.addEventListener('click', myclick, false);
	el.addEventListener('click', function(e){alert(e.defaultPrevented);}, false);
}
else if (el.attachEvent){
	el.attachEvent('onclick', function(){alert(event.returnValue);});
	el.attachEvent('onclick', function(){myclick.call(el);});
}
</script>

This is all good information to have, especially when you're working in an environment with other scripts.

It should also be noted that script libraries like jQuery, Prototype, Dojo, and others generally assign events in this way. So unless an author using one of those libraries specifies a version 4 syntax when assigning events, they will be assigned as version 5 events.