[ASP.NET AJAX Client] Delegates and Callbacks

Delegates are kind of function pointers. A delegates plays an important role when it comes to an event handling. Microsoft Ajax Library also provides another way to declare function pointers: callbacks. Delegates and callbacks seem similar each other. Why do we need 2 function pointers? Let’s find out.    

1.  Delegates and Callbacks

Microsoft Ajax Library provides the following 2 methods to create function pointers:

  • Function.createDelegate(instance, method)
  • Function.createCallback(method, context)

The differences are :

  • context: only callbacks can pass the additional context
  • instance: delegates can specify the instance of any object; the “this” keyword inside the delegate will refer to the specified instance object

They look similar but different.

2. Delegates

  • Function.createDelegate(instance, method)

A delegates does not pass additional parameters(context) to the event handler. But it changes the meaning of “this” in the handler.
Typically, the “instance” refers to the DOM element that raised the event.

In the following example, you want to find out which button is clicked.

<input id="Btn1" type="button" value="Button 1" />
<input id="Btn2" type="button" value="Button 2" />
<script type="text/javascript">
function pageLoad() { // page load event
  var clickDelegate1 =
    Function.createDelegate(this, onBtnClick);
  var clickDelegate2 =
    Function.createDelegate(this, onBtnClick);
  $addHandler($get('Btn1'), 'click', clickDelegate1, true);
  $addHandler($get('Btn2'), 'click', clickDelegate2, true);
}
function onBtnClick() {
  // how to find out which button is clicked
}
</script>

Deletegates do not pass context. So it is hard to find out which control triggered the event. You can solve this problem by passing the button element as a parameter.

function pageLoad() { // page load event
  var clickDelegate1 =
    Function.createDelegate($get('Btn1'), onBtnClick);
  var clickDelegate2 =
    Function.createDelegate($get('Btn2'), onBtnClick);
  $addHandler($get('Btn1'), 'click', clickDelegate1, true);
  $addHandler($get('Btn2'), 'click', clickDelegate2, true);
}
function onBtnClick(event) {
  alert('You clicked ' + this.value + ' (' + this.id + ')' );
}

3. Callbacks

  • Function.createCallback(method, context)

Callbacks pass an additional context parameter to an event handler. This way you can pass anything you want as a context parameter.

The previous example can be done with callbacks very easily.

function pageLoad() { // page load event
  var clickCB1 =
    Function.createCallback(onBtnClick, $get('Btn1'));
  var clickCB2 =
    Function.createCallback(onBtnClick, $get('Btn2'));
  $addHandler($get('Btn1'), 'click', clickCB1, true);
  $addHandler($get('Btn2'), 'click', clickCB2, true);
}
function onBtnClick(event, context) {
  alert('You clicked ' + context.value + ' (' + context.id + ')');
}

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s