Ajax Library – Event Handling

  • Article

System.ComponentModel.EventHandlerList - to add custom events to an object

To add custom events to an object, you add an instance of Sys.EventHandlerList into another object and expose public methods off that object that manipulate the instance. (Table 2.5 details the methods we use to manipulate the Sys.EventHandlerList type.)

How to add a custom event.

For instance I have an array notes[]. When I add a note I want to add an event, that shows an alert. To do this
1. Create an instance of Sys.Event.HandlerList. This instance holds list of handlers with their associated events.

_events=new Sys.EventHandlerList();

_events.addHandler("noteadded", functionName);

addHandler method adds the event name and function name to be executed on raise of that event.

How to raise this custom event

For this whenever a note is added following code needs to be written

var handler= _events.getHandler("notedded");

If(handler!=null)

handler(this,Sys.EventArgs.Empty)

2. To pass arguments of your own you need to create a class and inherit from Sys.EventArgs
Example
NotebookNamespace.NoOfNotesEventArgs=function(numOfNotes)
{

This._noOfNotes=numOfNotes;
}
NotebookNamespace.NoOfNotesEventArgs.prototype= {

Get_noOfNotes : function()

{

return this.noOfNotes;

}
}
NotebookNamespace.NoOfNotesEventArgs.registerClass("NotebookNamespace.NoOfNotesEventArgs", Sys.EventArgs)

Another this worth mentioning here is Sys.UI.DomEvent.
The Sys.UI.DomEvent class provides cross-browser access to DOM element event properties and methods to work with DOM element events
Some familiar methods of this class are $addHandlers, clearHandlers, preventDefault etc

Example

Var btn=$get("button1");

$addHandler(btn,{"click":button1_clickHandler});

However this has a problem of maintaining scope. The example below will tell you what I mean.

<html>
<body>
<form id="form1" runat="server">
<input type="button" value="btnTest" id="test" />
<asp:ScriptManager ID="scrptMgr" runat="server" />
</form>
<script type="text/javascript">
MyObject = function() {
this._name = "Deepa";
};
MyObject.prototype = {
clickEventHandler: function(e) {
alert (this._name);
}
};
var myObject = new MyObject();
$addHandler($get("btnTest"), "click", myObject.clickEventHandler);
</script>
</body>
</html>

The code looks like it will alert "Deepa". But it alerts "undefined"

That is because when event handler clickEventHandler executes, this points to the testButton and not the class MyObject.
To correct this we use Delegate provided by Microsoft Ajax Library

To create the delegate, we use the Function.createDelegate method, as
follows:
var del = Function.createDelegate(<instance>, <methodName>);

In the evenHandler i.e. <methodName> here, this will refer to <instance>

Hence with below code, "Deepa" will be alerted when clickEventHandler is executed

var myObject = new MyObject();
var dele =Function.createDelegate(myObject, myObject.clickEventHandler);
$addHandler($get("btnTest"), "click", dele);