JS registration/removal event handler (ExtJS application design practices)

Source: Internet
Author: User

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

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.