From Sencha - Learn

In Javascript, events (which may include user actions such as mouse gestures and keystrokes, and responses to Ajax requests) may occur at any time.

To respond to these events and take appropriate action, we supply an event handling Function as a listener for that event. The function is supplied as a raw function reference (a function name with no parentheses). Including parentheses after the function name makes it a function call that performs some action. Omitting the parentheses makes it a function reference that can be used later to call the function or passed to another function.

It is important to note that a function reference has no scope — no this reference — and to have a handler function execute with a particular object as its scope, that object must be specified when the handler is added for the event.

In the following examples, myElement is an Ext.Element object.

Correct:

myElement.on("click", myObject.clickHandler, myObject);

In the preceding example, the function name was passed correctly by reference.

Incorrect:

myElement.on("click", myObject.clickHandler(), myObject);

The preceding syntax passes the result of a call to myObject.clickHandler because of the (), which forces clickHandler to be called immediately rather than after the click event has fired. This can be valid if the function call actually returns a function reference that will be used as the true handler, but most of the time it is most likely not what you intended.

To pass parameters to a handler function, use the Function methods, e.g.:

myElement.on("click", myObject.clickHandler.createCallback("foo", {bar:"bletch"}), myObject);

In this last example, two parameters, the string "foo", and the object containing the property "bar" will be passed to the handler when the event occurs.

This page was last modified on 29 July 2007, at 15:07. This page has been accessed 10,995 times.