The most common thing to do when designing an ExtJS application is to register an event handler, because in the ExtJS world, it is almost entirely composed of time. Therefore, the ExtJS designer makes it very easy to register events (and also provides a very difficult way for you to choose) -- on/un, that is, the upper and lower ways, or addListener and removeListener can be used by all subclasses of Element. For example, a <div/> User wishes to give simple feedback when the user presses:
<Divid = "happyDiv" class = "happyStyle"/>
How can I register a mouse-click event for this <div/>? First, you must obtain the Element instance of this div:
VarhappyDiv = Ext. get ('happydiv ');
Then define the event handler:
Copy codeThe Code is as follows:
VarclickHandler = function (event, eventTarget ){
Ext. MessageBox. alert ("Click", "Youclicked:" + eventTarget. id );
}
Use on () to connect the event handler function with the Element instance:
Copy codeThe Code is as follows:
HappyDiv. on ('click', clickHandler );
When the program is executed, click <div/> and the result shown in Figure 3-15 is displayed.
Very simple, right? The sample file is ch03/event_demo.html. To remove this event handler, you only need to change on () to un. There is no event handler corresponding to the click event when the event is removed, and the underlying EventManager will determine it by itself. When an event handler is called, it receives three parameters: event, eventTarget, and optionObj. In this example, only two parameters are used. The third parameter is described when EventManager is discussed. Focus on event and eventTarget. The event type is Ext. Event, and eventTarget is an HTML element. When you press <div/>, the browser triggers the click event and calls clickHanlder (). For clickHanlder (), the received event is the click event triggered by the browser. EvnetTarget is the event target, that is, <div/>, and the value of eventTarget. id is "happyDiv ". Where should I find the root class of the event? Answer