Donnerstag, Januar 18, 2007

Building JavaScript Behaviors - 3

Methods for event handling

The methods that are used to handle events from the mouse, keyboard or system are identified by their name prefix "on". When the behavior is bound to the HTML element these methods are not just copied over from the JavaScript behavior declaration to the html element but are wrapped by a special function that looks like

function() {
  return method.apply(htmlElement, arguments);
}

This wrapper is generated automatically for all on__ methods to ensure that the JavaScript "this" pointer is pointing to the htmlElement the method belongs to. This really simplifies writing event code.

Simple Events

The first sample already used an event (onclick) and registered a method to calculate a new random number for the dice.

// classical event handler implementation

onclick: function(evt) { evt = evt window.event; var src = evt.srcElement; src.rolling = 50; src.count = 0; src.rollNext(); }

Because the this pointer is adjusted to the htmlElement we can use it instead of finding the right element through the event property srcElement:

// simpler event handler implementation

onclick: function(evt) { this.rolling = 50; this.count = 0; this.rollNext(); }

Global Events

Sometimes it is not possible to implement an event code by using this simple on__ naming scheme because the event that the behavior needs is not thrown to the htmlElement of the behavior.

If you are interested in global events you need to attach a method by using the AttachEvent method that is available through the jcl object. Don't use the on___ naming scheme for this method:

jcl.AttachEvent(document, "onmousedown", this._onmousemove);

If you are not interested in these events all the time the handler can be detached by calling:

jcl.DetachEvent(document, "onmousemove", this._onmousemove);

Mouse Events

Mouse events are a little bit special when implementing a drag&drop scenario. The onmousedown will always be raised on the element that will be dragged around but the other 2 events mousemove (while dragging) and onmouseup (when dragging ends and the drop occours) may be raised on any other elent on the page or even on the document object itself. Because the event "bubbles up" we can get all the events by attaichg these 2 methods to the document object.

The sample at VBoxDemo.aspx is using the VBox.js behavior that allows changing the width of the vertical separation by dragging the line between the left and right content.

You can download the updated files from http://www.mathertel.de/Downloads/Start_JSBTutorial.aspx.

del.icio.us tags: , ,

Kommentare:

Joris hat gesagt…

Hi, I saw another blog here, from a new guy i think, who speaks about atlas, the microsoft variant (http://koenscodewatch.blogspot.com/)

Does it really do the same ?

MatHertel hat gesagt…

Yes and no.
The behavior mechanism of atlas works the same from a top level view. But also some features are implemented different like namespaces or implementing event handlers.

The most important difference is that ATLAS is bound to ASP.NET for the AJAX functionality. In this framework I only use WebServices that can also run on other plattforms.
(The first commercial usage of this framework I know about is running on a JAVA)