The most common thing to do when designing ExtJS applications is registering event handlers, because in the ExtJS world, it's almost entirely time. As a result, ExtJS designers make registering events very easy (while also providing a very difficult way to choose from)--on/un, which is either up to the next two ways, or all subclasses of AddListener and removelistener,element can be used. For example, there is a <div/> want to give simple feedback when a user presses:
<divid= "Happydiv" class= "Happystyle"/>
How do I register the mouse click event for this <div/>? First you must obtain the element instance of this div:
Varhappydiv=ext.get (' Happydiv ');
Then you define an event handler:
Copy Code code as follows:
Varclickhandler=function (Event,eventtarget) {
Ext.MessageBox.alert ("Click", "youclicked:" +eventtarget.id);
}
Then use on () to connect the event handler function to the element instance:
Copy Code code as follows:
Happydiv.on (' click ', ClickHandler);
When the program executes, click <div/> the results shown in Figure 3-15 appear.
It's simple, isn't it? The sample file is ch03/event_demo.html. If you want to remove this event handler, simply change on () to UN (). There is no correlation between the event handlers that are not corresponding to the click event when they are removed, and the bottom EventManager will judge for themselves. When an event handler is invoked, it receives three parameters--event, Eventtarget, and Optionobj, with only two in the example, and a third parameter that is described when the EventManager is discussed. Here the focus is on event and Eventtarget, and the type of event is ext.event,eventtarget HTML element. The browser triggers the Click event when the user presses <div/> and calls Clickhanlder (), and for Clickhanlder (), the event that is received is the Click event triggered by the browser. Evnettarget is the event target, that is, the <div/>,eventtarget.id value is "Happydiv". As for the root class of the event, where should I go to find it? Answer
