In ASP.NET AJAX lib, there're 2 important types of events, event for Component (Sys.Component) and event for DOM Element.
Let's revise our old knowledge first.
Component (So, its derived class obtains these characteristics)
- Has to relation with DOM at all.
- Has no UI representation (not like Control (derived from Component base class) that has).
- Encapsulates client codes to reuse it across applications *** this is the purpose of Component that exceeds the original DOM elements. In AJAX lib, DOM elements are represent(encapsulate and enrich, indeed) by Sys.UI.Control base class, which actually derive from Sys.Component. So, Component is not Control, but its super class. Component means AJAX lib can manage that things. Some components you wouldn't see with bare eyes (like timer,etc.). Did you get it?
- Has Handler (cross-browser) that can bind with client object events.
- Implement Sys.IDisposable.
- Can raise the propertyChanged notification event when object property changed.
- You can access events of that Component using get_ and set_ events.
To manage events of Component, we use Sys.EventHandlerList class. It's a dictionary of client events for a component, with event names as keys and the associated handlers as values. It has 3 methods addHandler, clearHandler, and getHandler. For example, when binding event to Component:
add_tick: function(handler) {
this.get_events().addHandler('tick', handler);
},
remove_tick: function(handler) {
this.get_events().removeHandler('tick', handler);
}
this means anything (any class,whatever) that's derived from Component base class. The very important thing is here:
var h = this.get_events().getHandler('tick');
if (h) h(this, Sys.EventArgs.Empty);
This will execute the handler function h. Remember that this handler belongs this Component. For example, Handler 'tick' (this handler) might be the event that is specified from a page developer outside our authority. We, a component developer, may not know this handler at all. He may want to do some special effects presenting to the user on top of UI layer after the time ticked. Page developer doesn't have an idea what's inside our Component too, he just uses it cluelessly.
On the other hand, event for DOM element, when we attach it to that element we call it event binding to DOM element. For example, I bind 'click' event to my button on the page. When it's clicked, it'll do my handler function. Don't forget that, DOM is not the same as Component. It's just a small subset. Here, it is (complete list of its methods): http://msdn.microsoft.com/en-us/library/bb383775.aspx. I think you're familiar with it, no need to explain much:
//register handler for click event on the expand control
$addHandler(yourElement, 'click', yourHandlerFunction);
$clearHandlers(yourElement);
Note that if this.get_element() that you love returns AJAX lib wrapped up DOM element. So, you can attach it an event like this example as well.
Stay tuned for the very near article. Thanks.
b18d28e2-ef83-4b79-ae43-5d95f0a778db|0|.0