Sys.EventHandlerList Class
Creates a dictionary of client events for a component, with event names as keys and the associated handlers as values.
Namespace: Sys
Inherits: None
var e = new Sys.EventHandlerList();
Constructors
Name |
Description |
|---|---|
Initializes a new instance of the EventHandlerList class. |
Members
Name |
Description |
|---|---|
Attaches a handler to a specified event in an EventHandlerList instance, and adds the specified event to the list if it is not already present. |
|
Returns a single method that can be invoked to call all handlers sequentially for the specified event. |
|
Removes an event handler from the specified event in an EventHandlerList instance. |
Remarks
Use the EventHandlerList class to handle client events in custom ASP.NET AJAX components. The EventHandlerList class provides a central reference location for events and their handlers in a script block, component, or script resource file.
Note
This class is used only when you develop client components. It is not used for event handling outside the scope of component development and is not used for DOM event binding.
To raise an event, call the getHandler method with the id parameter set to the identifier of the event to raise. You then call the method returned by getHandler. This calls all the handlers for the event in order.
In a class derived from Sys.Component, you can access a run-time instance of the EventHandlerList by using the events property of the Sys.Component base class. For more information, see Sys.Component.events Property.
Example
The following example shows how to use the EventHandlerList class in a custom ASP.NET AJAX control. For information about how to create a custom control, see Creating Custom AJAX Client Controls, which includes the complete control that this example is based on.
// Register namespace.
Type.registerNamespace("Demo");
Demo.HoverButton = function(element) {
Demo.HoverButton.initializeBase(this, [element]);
// Create delegates in the Constructor.
this._clickDelegate = null;
}
Demo.HoverButton.prototype = {
// Bind and unbind to click event.
add_click: function(handler) {
this.get_events().addHandler('click', handler);
},
remove_click: function(handler) {
this.get_events().removeHandler('click', handler);
},
initialize: function() {
var element = this.get_element();
// Bind handler to delegate.
if (this._clickDelegate === null) {
this._clickDelegate = Function.createDelegate(this, this._clickHandler);
}
Sys.UI.DomEvent.addHandler(element, 'click', this._clickDelegate);
Demo.HoverButton.callBaseMethod(this, 'initialize');
},
_clickHandler: function(event) {
var h = this.get_events().getHandler('click');
if (h) h(this, Sys.EventArgs.Empty);
},
// Release resources before control is disposed.
dispose: function() {
var element = this.get_element();
if (this._clickDelegate) {
Sys.UI.DomEvent.removeHandler(element, 'click', this._clickDelegate);
delete this._clickDelegate;
}
Demo.HoverButton.callBaseMethod(this, 'dispose');
}
}
// Register the class.
Demo.HoverButton.registerClass('Demo.HoverButton', Sys.UI.Control);
// Notify the ScriptManager that this is the end of the script.
if (typeof(Sys) !== 'undefined') Sys.Application.notifyScriptLoaded();
<%@ Page Language="C#" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head id="Head1" runat="server">
<title>EventHandlerList Example</title>
</head>
<body>
<form id="form1" runat="server">
<div id="ResultDisplay"></div>
<asp:ScriptManager runat="server" ID="ScriptManager01">
<scripts>
<asp:ScriptReference Path="HoverButton.js" />
</scripts>
</asp:ScriptManager>
<script type="text/javascript">
var app = Sys.Application;
// Add the handler function to the pageLoad event.
app.add_load(applicationLoadHandler);
function applicationLoadHandler(sender, args) {
$create(
Demo.HoverButton,
{element: {style: {borderWidth: "2px"}}},
// Bind the start function to the click event.
{click: start},
null,
$get('Button1')
);
}
function start(sender, args) {
alert("The start function handled the HoverButton click event.");
}
</script>
<button type="button" id="Button1" value="HoverButton">
HoverButton
</button>
</form>
</body>
</html>