265Chapter 15Generic HTML Element Objectscall. Therefore, functions that (Business web hosting)
265Chapter 15Generic HTML Element Objectscall. Therefore, functions that need to reference forms or form control elements must buildtheir own references (with the help of the event object s property that says which object isthe event s target). By default, the W3C DOM event model has events bubble upward through the element con- tainer hierarchy starting with the target object of the event (for example, the button beingclicked). However, if you specify truefor the third parameter of the addEventListener() method, event capture is enabled for this particular event type whenever the current objectis the event target. This means that any other event type targeted at the current object bub- bles upward unless it, too, has an event listener associated with the object and the thirdparameter is set to true. Using the addEventListener()method requires that the object to which it is attachedalready exists. Therefore, you most likely will use the method inside an initialization functiontriggered by the onloadevent handler for the page. (The documentobject can useaddEventListener()for the load event immediately because the documentobject existsearly in the loading process.) A script can also eliminate an event listener that was previously added by script. TheremoveEventListener()method takes the same parameters as addEventListener(), which means that you can turn off one listener without disturbing others. In fact, becauseyou can add two listeners for the same event and listener function (one set to capture andone not a rare occurrence, indeed), the three parameters of the removeEventListener() enable you to specify precisely which listener to remove from an object. Unlike the event capture mechanism of NN4, the W3C DOM event model does not have a global capture mechanism for an event type regardless of target. And with respect toInternet Explorer, the addEventListener()method is closely analogous to the IE5+ attachEvent()method. Also, event capture in IE5+ is enabled via the separatesetCapture()method. Both the W3C and IE event models use their own syntaxes to bindobjects to event handling functions, so the actual functions may be capable of serving bothmodels with browser version branching required only for event binding. See Chapter 25 formore about event handling with these two event models. ExampleListing 15-20 provides a compact workbench to explore and experiment with the basic W3CDOM event model. When the page loads, no event listeners are registered with the browser(except for the control buttons, of course). But you can add an event listener for a clickevent in bubble and/or capture mode to the bodyelement or the pelement that surroundsthe spanholding the line of text. If you add an event listener and click the text, you see areadout of the element processing the event and information indicating whether the eventphase is bubbling (3) or capture (1). With all event listeners engaged, notice the sequence ofevents being processed. Remove listeners one at a time to see the effect on event processing. Listing 15-20: W3C Event Lab
ContinuedelementObject.addEventListener()