Creating Applications with Mozilla-Chapter 5. Scripting Mozilla- P2

Tham khảo tài liệu creating applications with mozilla-chapter 5. scripting mozilla- p2, công nghệ thông tin, kỹ thuật lập trình phục vụ nhu cầu học tập, nghiên cứu và làm việc hiệu quả
Nội dung trích xuất từ tài liệu:
Creating Applications with Mozilla-Chapter 5. Scripting Mozilla- P2 Chapter 5. Scripting Mozilla- P2Figure 5-2. Toggling the state of menu items in xFlyThe following section explains more about hooking scripts up to theinterface. Needless to say, when you use a method likegetElementsByAttribute that operates on all elements with aparticular attribute value, you must be careful not to grab elements youdidnt intend (like a button elsewhere in the application that gets disabled forother purpose).Notes[1] You can use other DOM methods, but these methods are most commonly used in the XPFE. Mozillas support for the DOM is so thorough that you can use the W3C specifications as a list of methods and properties available to you in the chrome and in the web content the browser displays. The full W3C activity pages, including links to the specifications implemented by Mozilla, can be found at http://www.w3.org/DOM/.5.3. Adding Scripts to the UIOnce you are comfortable with how JavaScript works in the context of theuser interface layer and are familiar with some of the primary DOM methodsused to manipulate the various elements and attributes, you can add yourown scripts to your application. Though you can use other techniques to getscripts into the UI, one of the most common methods is to use Mozillasevent model, which is described in the next few sections.5.3.1. Handling Events from a XUL ElementEvents are input messages that pass information from the user interface tothe application code. Capturing this information, or event handling, is howyou usually tell scripts when to start and stop.When the user clicks a XUL button, for instance, the button listens for theclick event, and may also handle that event. If the button itself does nothandle the event (e.g., by supplying executable JavaScript in an eventhandler attribute), then the event bubbles, or travels further up into thehierarchy of elements above the button. The event handlers in Example 5-3use simple inline JavaScript to show that the given event (e.g., the windowloading in the first example, the button getting clicked in the second, and soon) was fired and handled.As in HTML, predefined event handlers are available as attributes on a XULelement. These attributes are entry points where you can hook in yourJavaScript code, as these examples show. Note that event handler attributesare technically a shortcut, for which the alternative is to register eventlisteners explicitly to specified elements. The value of these on[event]event handler attributes is the inline JavaScript that should be executed whenthat event is triggered. Example 5-5 shows some basic button activationevents.Example 5-5. Basic event handler attributesWhile the window and button events in Example 5-5 carry out some inlinescript, there is a variation with the onchange handler attached to themenulist element. onchange contains a JavaScript function call whosedefinition may live in the XUL document itself or in an external file that isincluded by using the src attribute on a script element:A large basic set of event handler attributes is available for use on XULelements (and HTML elements). Appendix C has a full listing of theseevents along with explanations. The following subset shows the potential forscript interaction when the UI uses event handlers:onabortonbluronerroronfocusonchangeonclickoncontextmenuondestroyonloadonpaintonkeydownonkeypressonkeyuponunloadonmousemoveonmouseoutonmouseoveronmouseuponmousedownonrestonresizeonscrollonselectonsubmitSome of these event handlers work only on particular elements, such aswindow, which listens for the load event, the paint event, and otherspecial events.To see all event handler attributes on a particular element, you can executethe short script in Example 5-6, which uses the for in loop in JavaScript toiterate over the members of an object -- in this case, a XUL element.Example 5-6. Getting event handler attributes from an element function listElementHandlers(aObj) { if(!aObj) return null; for(var list in aObj) if(list.match(/^on/)) dump(list+\n); }The function you added in Example 5-4 is also an example of event handlercode in an applications interface.5.3.2. Events and the Mozilla Event ModelThe event model in Mozilla is the general framework for how events workand move around in the user interface. As youve already seen, events tendto rise up through the DOM hierarchy -- a natural process referred to asevent propagation or event bubbling. The next two sections describe eventpropagation and its complement, event capturing.5.3.2.1. Event propagation and event bubblingThis availability of events in nodes above the element of origin is known asevent propagation or event bubbling. Event bubbling means you can handleevents anywhere above the event-raising element in the hierarchy. Whenevents are handled by elements that did not initiate those events, you mustdetermine which element below actually raised the event. For example, if anevent handler in a menu element handles an event raised by one of the menuitems, then the menu should be able to identify the raising element and takethe appropriate action, as shown in Example 5-7. In this example, aJavaScript function determines which menuitem was selected andresponds appropriately.Example 5-7. Event propagationfunction doCMD(el) { v = el.getAttribute(label) switch (v) { case New: alert(New clicked); break; case Open: alert(Open clicked); break; case Close: alert(Close clicked); break; }}... The event handler in ...