JavaScript Examples Bible - UserWorks Technologies

Chapter 1 ✦ Generic HTML Element Objects (Chapter 15)
is mySPAN) is, indeed, the source element of the event. Because event bubbling is
enabled by default, the event bubbles upward to the SPAN element’s next outermost
container: the myP paragraph element. (However, mySPAN is still the source element.)
Finally, the event reaches the BODY element. If you click in the H1 element at the top
of the page, the event is not processed until it reaches the BODY element — although
the H1 element is the source element because that’s what you clicked. In all cases,
when you explicitly click something to generate the onclick event, the event’s
button property shows zero to signify the primary mouse button in IE.
Now onto the real purpose of this example: the fireEvent() method. Three buttons
enable you to direct a click event to each of the three elements that have event
handlers defined for them. The events fired this way are artificial, generated via the
createEventObject() method. For demonstration purposes, the button property
of these scripted events is set to 3. This property value is assigned to the event
object that eventually gets directed to an element. With event bubbling left on, the
events sent via fireEvent() behave just like the physical clicks on the elements.
Similarly, if you disable event bubbling, the first event handler to process the event
cancels bubbling, and no further processing of that event occurs. Notice that event
bubbling is cancelled within the event handlers that process the event. To prevent
the clicks of the checkbox and action buttons from triggering the BODY element’s
onClick event handlers, event bubbling is turned off for the buttons right away.
Listing 15-26: Using the fireEvent() Method
#mySPAN {font-style:italic}
// assemble a couple event object properties
function getEventProps() {
var msg = “”
var elem = event.srcElement
msg += “event.srcElement.tagName: “ + elem.tagName + “\n”
msg += “event.srcElement.id: “ + elem.id + “\n”
msg += “event button: “ + event.button
return msg
}
// onClick event handlers for body, myP, and mySPAN
function bodyClick() {
var msg = “Click event processed in BODY\n\n”
msg += getEventProps()
alert(msg)
checkCancelBubble()
}
function pClick() {
var msg = “Click event processed in P\n\n”
msg += getEventProps()
alert(msg)
Continued
67
elementObject.fireEvent()