Unfortunately, JavaScript works differently not only in different browsers, but in different versions of browsers. Older versions of Netscape Navigator and Internet Explorer don't recognize the same range of events as newer versions. Moreover, the most recent crop of browsersincluding Firefox, Safari, Opera, and Internet Explorer 6differ significantly when it comes to JavaScript. (The events available in Netscape Navigator 6 are far fewer than those in Internet Explorer 6.) These incompatibilities can make a chore out of developing interactive Web pages that work for the largest possible audience.
If you hope to build successful interactive Web sites, you can't avoid learning which tag/event combinations work in which browsers. Over 95 percent of Web surfers today, however, use versions 4 or greater of Netscape Navigator or Internet Explorer, so this book concentrates on behaviors that work with those browsers. Fortunately, these behaviors also work with most other modern browsers like Safari or Firefox.
Refer to the following pages, which list and explain the most common and useful HTML tags and events that work in these browsers, whenever you apply a behavior.
Each entry shows you the name of the event as you'll see it listed in the Behaviors panel, a plain-English description of what that event really means, and the list of tags to which this event is most commonly applied. See Figure 11-3 for the visual representations of those HTML tags. For example, you'll find out that the <select> tag represents a pop-up menu.
Web designers most often use mouse movement events to trigger actions (like the familiar rollover image). But mouse clicks on checkboxes, radio buttons , and other clickable form elementscan be mouse events, too.
Gets triggered : When the cursor moves over the tag.
Commonly used with these tags : <a>, <area>, <img>
Gets triggered : When the cursor moves off of the tag.
Commonly used with these tags : <a>, <area>, <img>
Gets triggered : When the cursor moves anywhere inside the tag. Works similarly to onMouseOver, but onMouseOver is triggered only oncewhen the mouse first moves over the tag. onMouseMove is triggered continually, whenever the mouse moves over the tag. The possibilities for an annoying Web page are endless.
Commonly used with this tag : <body>
Gets triggered : When a visitor clicks the tag and releases the mouse button.
Commonly used with these tags : <a>, <area>, <input type="button checkbox radio reset submit">
FREQUENTLY ASKED QUESTION The Vanishing Events List |
I applied a behavior to a link, but the only event available is onMouseOver. What happened to all the other events ? To make sure your behavior works in as many browsers as possible, check out the Show Events For submenu (also shown in Figure 11-2). The earlier the browser version you choose here, the fewer events you'll see listed. On the other hand, choosing an earlier browser version ensures that your behavior will work for more of your visitors . If you're developing your site with modern, standards-compliant browsers in mind, you can safely pick the HTML 4.01 specification listed on the Show Events For submenu. Your site will then work with the vast majority of Web browsers in use today. |
Gets triggered : When a visitor double-clicks the tag.
Commonly used with these tags : <a>, <area>, <input type="button checkbox radio reset submit">
Gets triggered : When a visitor clicks the tag. The mouse button doesn't need to be released for this event to occur (note the contrast with onClick).
Commonly used with these tags : <a>, <img>, <input type="button checkbox radio reset submit">
Gets triggered : When a visitor releases the mouse button while cursor is over the tag. The effect is the same as the onClick event.
Commonly used with these tags : <a>, <img>, <input type="button checkbox radio reset submit">
Keyboard events respond to key presses and releases. Most Web designers use them in association with form elements that accept text, such as password or text fields. (See Chapter 10 for more on forms.)
Gets triggered : When a visitor presses and releases a key while the tag is selected.
Commonly used with these tags : <textarea>, <input type="file password text">, <a>
Gets triggered : When a visitor presses a key while the tag is selected. The key doesn't need to be released for this event to occur.
Commonly used with these tags : <textarea>, <input type="file password text">, <a>
Gets triggered : When a visitor releases a key while the tag is selected.
Commonly used with these tags : <textarea>, <input type="file password text">, <a>
Several events relate to actions involving an entire Web page or frameset.
Gets triggered : When a Web page and any embedded elementslike images and Flash and QuickTime moviesload. Very often used for triggering actions when a visitor first loads the Web page; can also be used with an image tag to signal when that particular image has finished loading.
Commonly used with these tags : <body>, <frameset>, <image>
Gets triggered : When the Web page is about to be replaced by a new Web pagefor instance, just before the Web browser loads a new Web page after a visitor clicks a link.
Commonly used with these tags : <body>, <frameset>
Gets triggered : When a visitor resizes the Web browser window.
Commonly used with these tags : <body>, <frameset>
Gets triggered : When an error occurs while a Web page or an image loads.
Commonly used with these tags : <body>, <img>
Some events occur when the visitor focuses on different parts of a Web page, selects text, or chooses from a menu.
Gets triggered : When a visitor selects text in a form field.
Commonly used with these tags : <textarea>, <input type="text">
Gets triggered : When a visitor changes the text in a form field.
Commonly used with these tags : <textarea>, <input type="file password text">, <select>
Gets triggered : When an element becomes the focus of the visitor's attention. For instance, clicking in a form text field or tabbing to it gives the text field focus.
Commonly used with these tags : <body>, <frameset>, <textarea>, <input type="button checkbox file password radio reset submit text">, <select>
Gets triggered : When an element loses the focus. For instance, if the visitor is typing into a form text field and then clicks outside of that field, the onBlur event occurs. The onBlur event is also triggered when the surfer sends a window to the background. For example, suppose your visitor is reading your Web site in one window and has another open in the background. If he clicks the background window, the current page loses focus and an onBlur event occurs.
Commonly used with these tags : <body>, <frameset>, <textarea>, <input type="button checkbox file password radio reset submit text">, <select>
While each element of a formradio button, text field, checkboxcan respond to a variety of events, the whole formthe entire collection of elementscan respond to only two events:
Gets triggered : When a visitor clicks the Submit button on a form.
Commonly used with this tag : <form>
Gets triggered : When a visitor clicks the Reset button on a form.
Commonly used with this tag : <form>