Tuesday, November 7th, 2006

DOM events in the Microsoft Ajax Library formerly known as Atlas

Category: .NET, Ajax

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.

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:

javascript

  1. // register a handler (shortcut for Sys.UI.DomEvent.addHandler)
  2. $addHandler(myDomElement, "click", someFunction);
  3.  
  4. // Enums in event handlers
  5. function myClickHandler(e) {
  6.   if (e.button === Sys.UI.MouseButton.leftButton) {
  7.     //...
  8.   }
  9. }
  10.  
  11. function myKeyUpHandler(e) {
  12.   if (e.keyCode === Sys.UI.Key.enter) {
  13.     //...
  14.   }
  15. }

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:

javascript

  1. $addHandlers(this.get_element(), {
  2.   mouseover: this._onHover,
  3.   mouseout: this._onUnhover,
  4.   focus: this._onHover,
  5.   blur: this._onUnhover
  6. }, this);

Posted by Dion Almaer at 9:52 am
6 Comments

+++--
3.5 rating from 46 votes

6 Comments »

Comments feed TrackBack URI

We are now the knights who say “Ajax”!

Comment by Brent Ashley — November 7, 2006

Seems not to be something new. Or even relevant from the technical point of view. Something comparable could already be found in many other frameworks and toolkits e.g. mochikit, qooxdoo, dojo, … However it’s interesting that they really switched to more standard like names. Well done.

Comment by Sebastian Werner — November 7, 2006

Sebastian: you’re right, it’s nothing particularly new, as the original post points out: “So we decided to change our compat layer and come back to a more conventional approach”.

Comment by Bertrand Le Roy — November 7, 2006

ATLAS ROCKS…..!!!! :)

Comment by khushal — November 8, 2006

[…] Richard MacManus has posted on The State Of Web Development – Ajax set to surpass Flash in ‘07. … Category: Ajax, Usability, Games, Google, Comet, GWT … More Information […]

Pingback by Web 2.0 » Blog Archives » AJAX library for the Microsoft .NET framework. More — November 16, 2006

Hi

I just launched this web 2.0 app called Matrix. this is pure AJAX driven app and it can convert any website into an instant community and can connect together all the people who are on that web site at that instant. I invite you to please come and share your thoughts on your experience with Matrix.

Thanks
Creator

Comment by Matrix — November 23, 2006

Leave a comment

You must be logged in to post a comment.