Free Javascript Tutorials

home

JavaScript Tutorials

Events

 
Our quick javascript links
Little Programmes
 
 
 
 
 
 

 

Javascript Events - Browser Detection

 

You have already met a few JavaScript events that you can use in your code. The one you're most familiar with is onClick. You have also met the onMouseOver event and the onMouseOut event. These events are just special in-built instructions to the browser. The browser sees the event name, and knows that some code is coming up that it needs to execute. You don't really have to worry about how the browser executes the events. With JavaScript, what you should concentrate on is what the events do, and how you use them.

Here, then, is a list of (some) events you can use with JavaScript:

onClick
onDblClick
onDragDrop
onKeyDown
KeyPress
KeyUp
MouseDown
MouseMove
MouseOut
MouseOver
MouseUp
Move
Resize
onLoad
onUnload
onChange
onReset
onSelect
onSubmit

The problem is that although most browsers recognise those events, the event itself can be quite torturous to use, especially since Netscape came up with the Event Object. The Event Object is a way for the window itself to record events. For example, if the mouse was clicked in the window you can record the position of the mouse pointer. But Internet Explorer doesn't recognise this Event Object of Netscape's. So any code you write which uses the Netscape's Event Object will cause an error if the page is loaded into Internet Explorer.

The standard way round this is to write code which detects the browser type. Because there are a lot of other things that one browser can do that the other can't, browser detection is considered good practice.

In this next segment, we'll look at one way to detect which browser the user has (Netscape or Internet Explorer), and then direct them to the relevant code. The code they'll get tells them the mouse position on the screen. You'd better hang on to your hats, though, because this could be quite a bumpy ride!

 

Browser Detection

We start detecting the browser with the navigator object. You met this object earlier. It's quite simple:

Browser = navigator.appName

The appName property will tell us whether the user has Netscape or Internet Explorer (we're assuming just these two are used). The variable Browser will then hold either the text "Netscape" or "Microsoft Internet Explorer".

Next, we need to search that text for either the word "Netscape" or the word "Microsoft".

Net = Browser.indexOf("Netscape")
Micro = Browser.indexOf("Microsoft")

One way you can search text is with the in-built function indexOf. Remember, our variable Browser is holding the text. After typing a full stop, you type indexOf followed by a pair of round brackets. Inside the round brackets you put the text you're looking for. The text you're looking for goes in double quotes if it's direct text. (No quotes are used if the text you're looking for is in a variable.)

Browser.indexOf("Netscape")

All that means is, "Search whatever is inside the variable Browser and find out if the word Netscape is there." If Netscape is there, what will be returned is the position of the first letter of the word Netscape. The search starts at position zero. If the word Netscape is not found, what will be returned is the number minus one (-1).

Our two variables, Net and Micro, will then hold either zero or greater, or minus one.

Net = Browser.indexOf("Netscape")
Micro = Browser.indexOf("Microsoft")

We can use an if statement to test which one holds the minus one, and which one doesn't: Here's the entire script. Place it in the HEAD section of a web page and try it out.

<Script language = javascript>
Browser = navigator.appName
Net = Browser.indexOf("Netscape")
Micro = Browser.indexOf("Microsoft")

Netscape = false
IE = false

if(Net >= 0) {
Netscape = true
alert("You're using Netscape")
}

if(Micro >= 0) {
IE = true
alert("You're using Internet Explorer")
}

</script>

And that's it - a simple (ish) way detect which browser is being used. However, more code would usually need to be added. This is because some older versions of Netscape or Internet Explorer wouldn't be able to process this next code. So you would need to get which version of Netscape or Internet Explorer was being used. You'd use navigator.appversion for this. But as this is supposed to be as section on events, we'll leave that aside.

In the next part, we'll explore the onMouseDown event.

 

Move on to the Next Part-->

<--Back to the JavaScript Contents Page