JS registration/removal event handler (ExtJS application design practice)_javascript skills

The most common thing you do when designing an ExtJS application is register event handlers, because the world of ExtJS consists almost entirely of time. Therefore, the designers of ExtJS make it very easy to register events (and also provide a very difficult way for you to choose) - on/un, that is, up and down, or addListener and removeListener, Element's Available to all subclasses. For example, there is a

that you want to give simple feedback when the user clicks:

How to replace this

varhappyDiv=Ext.get('happyDiv');
Then define the event handler:

Copy code The code is as follows:

varclickHandler=function(event,eventTarget){
Ext.MessageBox.alert("Click","Youclicked:" eventTarget.id ;

The code is as follows:

happyDiv.on('click',clickHandler);

When the program is executed, click

The result shown in Figure 3-15 will appear. Pretty simple, right? The sample file is ch03/event_demo.html. If you want to remove this event handler, just change on() to un(). It doesn't matter if there is no event handler corresponding to the click event when removing. The underlying EventManager will make its own judgment. When the event handler is called, it will receive three parameters - event, eventTarget and optionObj. Only two are used in the example. The third parameter will be explained when discussing EventManager. Here we first focus on event and eventTarget. The type of event is Ext.Event, and eventTarget is an HTML element. The browser triggers a click event and calls clickHanlder() when the user presses

. For clickHanlder(), the event received is the click event triggered by the browser. evnetTarget is the event target, which is

, and the value of eventTarget.id is "happyDiv". As for the root class of the event, where should we look for it? Answer