ASP .net AJAX Event handlers - the very very basics
At my work, my boss jokes that there are two types of people: those who speak English and those who don't (they speak in technical Jargons or terms instead). I am one of those who do not, moreover, I am the only one who actually speaks asp .net. However, now with ASP .NET AJAX, I feel like one of those who do not. (Almost. I am getting much better, that is why I am blogging here. :)
ASP .net AJAX, not asp .net, not JavaScript (Quoting Britney Spears, not a girl, not a woman).
For example, in JavaScript, to respond to a button click, we do,
<input type=button name="button1" text="click me" onClick="clickMe()".>
However, in the ASP .net AJAX api syntax, we handle the event (using event handler) in any of the following three ways:
- Directly add a event responding function
- create client delegate: Function.createDelegate
- create callback: Function.createCallback
Each of the three methods have different signatures and have its nuances
- $addHandler takes three parameters: Dom element, event name, event handler. e.g.,
$addHandler(btn1,'click', handleBtnClick);
So the first argument would be the event object itself, the last one the function that handles the click event.
2. Function.createDelegate takes 2 parameters: keyword: this --> referring to the window object; and the function. With a clientDelegate, we are able to access other dom elements and properties of the container.
var clickDelegate = Function.createDelegate(this, onButtonClick);
3. Function.createCallback takes 2 argument: the first one, the event itself and any additional info you wish to pass to the function. In ASP .net AJAX, this piece of information is called context. The context could be handy when we need to communicate with an event some information, for example, a piece of data.
var clickCallback = Function.createCallback(onCallBackButtonClick, {userid:xxxxxx});
Put it together, the following is a very simple test page using the above three methods
<script language="javascript">
<!--
function pageLoad()
{
var btn1 =$get('btn1');
var btn2 =$get('btn2');
var btn3 =$get('btn3');
$addHandler(btn1,'click', handleBtnClick);
var clickDelegate = Function.createDelegate(this, onButtonClick);
$addHandler(btn2,'mousedown', clickDelegate);
var clickCallback = Function.createCallback(onCallBackButtonClick, {date:new Date()});
$addHandler(btn3,'mouseover', clickCallback);
}
function pageUpload()
{
var btn1 =$get('btn1');
var btn2 =$get('btn2');
var btn3 =$get('btn3');
$removeHandler(btn1,'onClick', handleBtnClick);
$removeHandler(btn2,'onClick', clickDelegate);
$removeHandler(btn3,'onClick', clickCallback);
}
function handleBtnClick(evt)
{
alert("Evoked from event handlers: " + evt.button);
}
function onButtonClick(evt)
{
alert("Evoked from delegate: " + evt.button);
}
function onCallBackButtonClick(evt, context)
{
alert("Evoked from callback" + evt.button + context.date);
}
//-->
</script>
<input type="button" id="btn1" value="Button 1 -- Add Handler" />
<input type="button" id="btn2" value="Button 2 -- Client Delegate" />
<input type="button" id="btn3" value="Button 3 --Client CallBack" />
Please note, in AJAX, we are always busy adding and removing handlers, getting and setting properties. No exceptions here. You can basically do those adds and removes with your eyes shut):