Hardware

Creating browser-independent event handlers requires careful planning

Handling browser events in a cross-platform environment requires careful thought when designing your application. The key issue is the supported browsers, since event support isn't consistent. See how browser events are handled in HTML and JavaScript.


When developing applications in a cross-browser environment, you must take care to insure that the user interface isn't dependent on an event that is unique to a specific browser. The wide range of interpretations of event standards adds an additional degree of difficulty. It would be embarrassing to explain to management that the onbeforeunload event is one of Microsoft's browser extensions, so the new e-commerce site can only be used by people running Internet Explorer. Equally embarrassing is when events behave differently across various browsers.

To avoid predicaments like these, you need to do a little research, and the best place to start is in Chapter 18 of the World Wide Web Consortium's HTML 4.0 specifications. This section of the specification describes scripting and lists the basic intrinsic events available in HTML documents. These events are shown in Table A, and they include only the most basic events. Table B describes additional events supported in both Microsoft Internet Explorer and Mozilla. In a controlled environment, such as an Intranet, where the browser and version are decreed, additional event handlers are available, so pretty much anything goes.

Table A
Event Name Handler Description
blur onblur Element loses focus
change onchange Element's value has changed due to user action
click onclick Element clicked
dblclick ondblclick Element double clicked
focus onfocus Element receives focus
keydown onkeydown Keyboard key pressed
keypress onkeypress Combination of keydown and keyup, used for keyboard combinations
keyup onkeyup Keyboard key released
load onload Window or frame has loaded
mousedown onmousedown Mouse button is pressed over an element
mousemove onmousemove Mouse pointer is moved while over an element
mouseout onmouseout Mouse pointer is moved off an element
mouseover onmouseover Mouse pointer is over an element
mouseup onmouseup Mouse button is released over an element
reset onreset Form is reset
select onselect Text in text field is selected
submit onsubmit Form is submitted
unload onunload Window or frame has unloaded
Basic intrinsic events supported in HTML

Table B
Event Name Handler Description
abort onabort User aborted image download
blur onblur Element loses focus
change onchange Element's value has changed due to user action
click onclick Element clicked
contextmenu oncontextmenu User right clicks on document creating context menu
dblclick ondblclick Element double clicked
dragenter ondragenter Object dragged to target element
dragover ondragover Object dragged over target element
error onerror Error occurs during object loading
focus onfocus Element receives focus
keydown onkeydown Keyboard key pressed
keypress onkeypress Combination of keydown and keyup, used for keyboard combinations
keyup onkeyup Keyboard key released
load onload Window or frame has loaded
mousedown onmousedown Mouse button is pressed over an element
mousemove onmousemove Mouse pointer is moved while over an element
mouseout onmouseout Mouse pointer is moved off an element
mouseover onmouseover Mouse pointer is over an element
mouseup onmouseup Mouse button is released over an element
reset onreset Form is reset
resize onresize Object is being resized
scroll onscroll User moves an object's scroll bar
select onselect Text in text field is selected
submit onsubmit Form is submitted
unload onunload Window or frame has unloaded
Additional browser events

Setting event handlers
There are two main cross-browser methods for setting event handlers: on the actual HTML tag or via JavaScript. The following code snippet illustrates setting the event handler on the tag:
<input type="button" id="btnOne" value="Set by Tag" onclick="alert('Tag')" />

This code in Listing A shows the JavaScript equivalent.

With a few exceptions, the method you use is largely a matter of personal preference. An exception might be when a page is generated dynamically and an element isn't present on a page. In such cases, it's easier to include the event handler in the HTML element. This way, if the element isn't there, neither is the event handler. The alternative would be to use a try-and-catch block to prevent JavaScript errors.

Use the this keyword
When setting an event handler that invokes a JavaScript function, the biggest problem is determining the specific HTML element associated with the event. You can reference the HTML element by using the keyword this. The this keyword passes the element, by reference, to the invoked JavaScript function. If btnOne is clicked, btnOne is passed to the event handler. This is displayed in the code in Listing B.

In addition, the this keyword can be used in either the HTML element or in JavaScript.

Which events to use
Deciding which event handlers to use and when to use them largely depends on what you're trying to accomplish. An example of this is the onkeydown event, which works great for capturing most keystrokes. However, it has a real problem with key combinations, such as [Shift]2, which is translated as two separate keystroke events. To capture combinations, you need to use the onkeypress event, which, unlike the onkeydown event, returns the proper at character (@). This makes the onkeypress event extremely useful for keyboard edit routines.

Generally, event types are divided into three groups: document, mouse, and keyboard. Document events deal with the page and its elements, such as buttons and links. The load and unload events also fall under the document umbrella. Mouse events cover movement of the mouse and mouse buttons. Keyboard events are handled by onkeypress, onkeydown, and onkeyup.

Stopping events
Internet Explorer and Mozilla both allow you to cancel events, but the methods differ greatly between the two browsers. With Mozilla, event propagation starts at the highest level and works its way down to the element level. This method is referred to as event capturing. Internet Explorer uses an approach called event bubbling, where propagation starts at the element level and works its way up to the highest level.

This means that radically different code is required when you need to cancel events in a cross-browser environment. However, this situation may soon change. The World Wide Web Consortium's DOM Level 2 specification details an event object that combines features of Mozilla's event capturing and Internet Explorer's event bubbling. Unfortunately, DOM Level 2 has not been implemented in either browser.

Compatibility and JavaScript
Even though browser events still have some cross-browser compatibility issues, when used in conjunction with JavaScript, their strength is apparent. Ignoring the use of browser events could cause Web pages to become very boring and static.

Editor's Picks