DOM events in the Microsoft Ajax Library formerly known as Atlas
Evil Microsoft. The client-side DOM event model in Atlas (ASP.NET Ajax Extensions) was the IE model. Atlas implemented this model for the other browsers to make it work, and many didn't like this.
This has now all changed and a new API is in town.
There are also some other new features such as helpers to make component developers lives easier.
For example, an accessible hover behavior might want to subscribe to mouseover, mouseout, focus and blur. To do that, you'd typically create delegates to your handlers and then wire up these delegates to the DOM events one by one. From your "dispose" method, you'd also have to remove those handlers one by one and get rid of the delegates. Seeing that this pattern was repeated over and over again in almost any control or behavior sample, we decided to add helpers to batch those operations. So here's how you would wire up all those events:
The new model for DOM events is thus introducing a new API, but at least it's closely modeled after the standard APIs so it should feel pretty familiar. There are many differences in the implementations of DOM events that we needed to abstract. The first one is in the names of the methods that you call to add an event. In standard browsers, you use add/removeEventListener, in IE it's attach/detachEvent. The event names themselves are different: "click" is "onclick" in IE. Then, you have to abstract the signature of the event handlers themselves: in IE the parameters come from the global window.event object, in other browsers they are passed as a parameter. Finally, the contents of the event parameter object are themselves widely divergent from one browser to the other: mouse buttons don't have the same values for example, and some very useful stuff like mouse positions is missing altogether from the standard.To do work you now:
// register a handler (shortcut for Sys.UI.DomEvent.addHandler)
$addHandler(myDomElement, "click", someFunction);// Enums in event handlers
function myClickHandler(e) {
if (e.button === Sys.UI.MouseButton.leftButton) {
//...
}
}
function myKeyUpHandler(e) {
if (e.keyCode === Sys.UI.Key.enter) {
//...
}
}
$addHandlers(this.get_element(), {
mouseover: this._onHover,
mouseout: this._onUnhover,
focus: this._onHover,
blur: this._onUnhover
}, this); 
