InterActive DHTML Tutorial 11

DHTML Tutorial 14
Event Handling in MSIE

Welcome back! Well, there's good news and bad news. The good news is that you have learned the concepts of event handling in the 4.0 and 5.0 browsers by learning "Event Handling for Netscape." The bad news is that, of course, MSIE does it a little differently. So, first we'll talk about the differences in MSIE, and then we'll do the same examples we did in the last lesson, but we'll make them work for MSIE.

The nice thing about events Internet Explorer is that just about all of the objects will capture just about all of the events without the need for event capturing. For example, you can use onclick in stylesheets in Internet Explorer (recall that you can't do this in Netscape). In some cases, this makes using events much easier. The first big difference between MSIE and Navigator is...<drumroll>...you don't use the "captureEvents()" method. Instead you just tell the browser what function to run when a certain event happens to a certain object.

Difference #2: The event object is different. Firstly, you don't get the Event object as a parameter to your function. Instead the Event object is a window variable. This means that when we want to retrieve the Event object for the current event, all we have to do is say "event.property".

That brings up another difference...the Event object properties are different. Here is a list of the Event Object Properties (borrowed from the Miscrosoft Web Site.)

altKey, button, cancelBubble, clientX, clientY, ctrlKey, dataFld, dataTransfer, fromElement, keyCode, offsetX, offsetY, propertyName, reason, recordset, returnValue, screenX, screenY, shiftKey, srcElement, srcFilter, toElement, type, x, y

Before we're through, you'll be able to figure out what most of these mean. For instance, X and Y are very much like pageX and pageY in Netscape. clientX and clientY are like pageX and pageY except, if you have frames, no matter what frame the event is triggered in it is relative to the upper leftmost point of the client area (the browser excluding button bars and menus, etc.)

The best way to figure all of this out is to try it, so let's do the first example we did in the last tutorial.

alert("Hello");
}

//-->
</script>
Click somewhere on this page.

Go try it...it's exactly the same as in the last tutorial...pops up a window but doesn't get any information about the Event. Notice in red that we don't have "(e)", all we have is "()". This is because MSIE doesn't pass the event object as a parameter to the function. If we don't take that "e" out nothing bad happens, but it doesn't hold our event so we don't need it here.

OK...let's do something interesting with the event object. Let's make it so that when we click, an alert tells us the coordinates of where we clicked.

alert(event.type + " occured at " + event.x + "," + event.y);
}

//-->
</script>
Click somewhere on this page.

Yeah I'm lazy and I combined the second and third examples from the last tutorial. As you can see, we're doing the exact same things as we did with Netscape, but instead of using an event object passed to the function as a parameter, we're using an event object that just seems to exist out there somewhere. Get it?

You probably don't need me to show you this next part, but I'm going to anyway...let's look at using multiple event handlers for a given object...in this case document.

alert(event.x + "," + event.y);
}

function moveme(){

window.status = event.x + "," + event.y;
}

//-->
</script>
Click somewhere on this page.

Same deal as in Netscape. Are you getting bored seeing the same stuff again? Sorry :)

Here is an example of using one function for 2 events:

else if (event.type == "mousemove") window.status = event.x + "," + event.y;
}

//-->
</script>
Click somewhere on this page.

What if we want to stop capturing an event. In Netscape we used "releaseEvents()". As you may have figured, since we don't have "captureEvents()" in Netscape, we don't have "releaseEvents()" either. How do we cancel events in MSIE? Well, instead of telling the browser to do something when an event occurs, we tell it to do nothing. How? We set the event handler to "null". That is, the browser runs the "null" function when an event occurs (really the browser doesn't run any function...it knows not to do anything when it sees null.)

Let's make it so that after the first time we click and see the alert box, it doesn't pop that box up anymore when we click:

if (event.type == "click"){

alert(event.x + "," + event.y);

document.onclick = null;

}

else if (event.type == "mousemove") window.status = event.x + "," + event.y;
}

//-->
</script>
Click somewhere on this page.

In the next section below, we'll see that there are two different ways of capturing events on an HTML element such as a stylesheet.

Two different ways of capturing events on elements

As I said in the beginning of this lesson, Internet Explorer allows for just about all events handlers to be used with just about all elements. For example, lets use the ONCLICK event handler with a stylesheet.

^M

<head> <script langauge=javascript>
<!--

function showme(){

alert("You clicked the Stylesheet!");

} //-->
</script>
</head>
<body>
<br>
<span id=test onclick="showme();" style="position:absolute; top:40; left:40; background-color:blue; color:white;">
click here
</span>

</body>

Preview this.

You see, this is how we would expect to handle events, and Microsoft was nice enough to endow stylesheets with all of the event types. Here is another way to do the same thing:

Ah ha! You see now that we can capture an event from any object in the document in Internet Explorer.

Keyboard events in Internet Explorer

Using keyboard events in Internet Explorer is very similar to using them in Netscape with some slight differences as you'll see. Instead of e.which as in Netscape to grabwhich key, we use Event.keyCode insted, but to convert the keycode to characters we again use String.fromCharCode. For example, try the following:

Okay, there you have it.