Interoperable DOM Events are a core part of delivering the promise of HTML5’s “same markup.” With DOM Events support in IE9, web developers can write more interoperable code using an event model that is more robust and offers additional functionality not possible in IE’s previous model.
When authoring JavaScript event code for IE8 or previous versions, web developers have to branch their code specifically for IE. For example, most pages which employ cross-browser event code do so by using a completely separate code path:
if ( <addEventListener detect> ) {
// W3C DOM Event Model
// Supported by: Firefox, Chrome, Safari, Opera, and (now) IE9
}
else if ( <IE or attachEvent detect> ) {
// Previous IE Event Model code
}Alternatively, web developers might use the “traditional” event model (HTML event attributes) since it offers the most interoperable functionality. However, this comes with a dramatic loss of functionality. The efforts of JavaScript framework publishers to patch browser differences between event models but often take a performance hit in doing so.
With IE9, you can write the same markup and script and have it work across browsers without sacrificing functionality or performance. Please follow best practices to ensure your standards-based event processing runs in IE9. The Platform Preview will let you begin to see how your code will run in IE9. We encourage you to report issues you find. Since IE9 is still in development, the Release Notes and Connect bug database will help you understand if the issue you found is known.
“Same markup” through standards
Today developers can’t have the same markup run across browsers. IE9’s support of DOM Level 3 Events is a huge step forward but doesn’t entirely solve the problem. That’s why we’re working in the W3C to create a high-quality spec and create a test suite to help browsers converge on interoperable behavior.
For several years now, we have been working with the W3C standards organization to provide input and feedback on this latest version of DOM Events. When finished, this “Level 3” version will supersede its nearly 10-year old predecessor, DOM L2 Events. It’s been a pleasure to work regularly with members of that working group, representatives from industry, and other browser vendors to ensure that the specification is implementable, meets web developer scenarios, and raises the bar on interoperability.
There are two specific parts of the DOM Level 3 Events specification that I’m particularly excited about from the perspective of interoperability. The first is that IE’s “mouseenter/mouseleave” and “focusin/focusout” events have been recently adopted based on their utility and wide-use on the web.
The second is the Keyboard event interface. Did you know that the ubiquitous “keydown” “keyup” and “keypress” events (present in all browsers) were never standardized? This is an example of one of the reasons that web developers don’t have the “same markup” (script) running across browsers with regard to the keyboard.
The IE9 platform preview is the first implementation of the Keyboard event interface from the DOM Level 3 Events specification. The Keyboard event interface defines a Keyboard-interaction model that solves longstanding internationalization issues as well as provides a convenient high-level keyboard abstraction (based on Unicode). Naturally, we expect that previous low-level keyboard APIs (e.g., “keyCode”), despite not being 100% interoperable, will coexist in browsers for backwards compatibility. We welcome feedback on this interface, and for those interested in providing feedback directly to the working group, please email www-dom@w3.org.
In our continued efforts to drive interoperability, we have contributed an initial set of tests for the DOM Level 3 Events specification and plan to contribute more in future updates to the Test Center. As the specification evolves toward recommendation status, these tests may also need to evolve. We look forward to feedback on these tests, and welcome test contributions from the community and other implementations to establish a DOM Level 3 test suite that meets the high interoperability goals of the specification.
Changes from the previous IE event model
As a whole, the DOM Events model (from both DOM Level 2 and Level 3 Events) solves many scenarios which the previous IE model is not equipped to handle. For example, the new DOM Events model enables the following scenarios to work interoperably across all browsers:
- A “catch-all” listener can be registered on a DOM subtree for an event which does not bubble (requires capture phase).
- Guaranteed firing order for multiple listeners on a single node.
- Ability to tell which node the event flow is currently on (currentTarget).
As a result of supporting the new event model, IE9 standards mode makes a few changes to some existing events in the first platform preview build. (All of these changes are scoped to IE9 standards mode only.) For example:
- The bubble/cancel defaults for many events have changed to match the standard.
- Event listener registration for legacy events supported in the new model (using attachEvent/detachEvent) use the same event-firing order as addEventListener.
- Registration using the HTML event attributes (and their properties) will simultaneously enable the MSEventObj (legacy event object) through the window.event property as well as the new DOM event via the event handler parameter. We do this because the HTML event attribute registration technique is ambiguous—e.g., did the web developer expect the new DOM Events model or the old IE one?
We built an interactive demo to showcase some of the features of the DOM Events model. Check it out on the IE9 Test Drive site. We also show a simple example of one way in which DOM Events can be used in practice. View it in the IE9 platform preview then view it in another browser; the key takeaway is that the DOM Events model works the same way across browsers—“same markup” in action.
More to come
We’re still in development so there’s more to come. Here are a few top things you may find missing that will be available in a future update to the platform preview. Please read the Release Notes for further information.
- Mutation events. The mutation events allow web pages to react to changes in the structure of an HTML document such as changes in attributes, text content, element removals and additions, etc. The DOM Level 2 Events specification defines the mutation events. Note, however, that not all the mutation events are implemented across all browsers.
- DOMContentLoaded. The DOM Level 3 Events specification defines the generic event framework and a core set of events, but does not define all the events that are relevant for a web browser to support. HTML5 defines many additional events, most notably DOMContentLoaded and other events related to parsing and loading a webpage.
- Compatible event properties. While not standardized, many event properties like “keyCode”, “cancelBubble”, etc. are widely implemented by other browsers and many web pages depend on their functionality for purposes of interoperability.
We encourage web developers everywhere to start coding primarily to the DOM Event model. Check out the test drive demo and interactive events demo, the DOM Level 3 Events test cases, and send us feedback.
Thanks,
Travis Leithead
Program Manager
