Share this Page URL

Chapter 10. Event Objects > Referring to the Event Object - Pg. 149

Event Objects 12. 149 13. 14. Now that we've set the form element to do something when the click event trickles down to it, we're also setting it to do something when the click event bubbles back up to it. This time, we're sending it to the formClickBubble function, and we know that it's going to be activated during the bubble up because the final argument in addEventListener is false. This way, the form element is hit by the click event twice: once on the way down (event capture/trickle down) and once on the way up (bubble up). Here's the form element and its id. And here's the button that starts it all. Notice that it calls the same alertEvent that some of the other functions call. That's as deep as we're going to get into event propagation. Hopefully, it's more that you'll ever need to know. Go forth and propagate well! Referring to the Event Object Now that you know how the event object moves all about, trickling down and bubbling up, remem- bering how to actually refer to it can be challenging, since the various browsers refer to the event object in different ways. The event object is easiest to refer to in IE. All you have to do is refer to the window.event. In fact, since the "window" is optional, you can just refer to the event as event. Usually, there will be some property value after it, like event.eventPhase or event.clientX. In NN4 and in the W3C DOM, the event object is a little harder to get a hold on. The only way to access the event is as a passed argument in the event handler function. What does this mean? I'll show you: document.onclick = clickFunc function clickFunc(thisIsTheEventObject) { ... } In this case, clickFunc is the event handler function. That is, it's the function that's executed when the event handler sees the event occur. The function automatically gets the event object as a passed parameter, and it can use that object like any other object, including passing that object to other functions, as we saw in Example 10-5, where the event object (e) was passed to the alertE- vent function. Event Object Properties One of the more challenging aspects of dealing with event objects is knowing the names of all the properties that all of the browsers use. With that in mind, Table 10-1 will hopefully help. Table 10-1. Some Event Object Properties PROPERTY Target element/event source Event type mouse button keyboard key Shift key Alt key Control key NN4 target type which which modifiers modifiers modifiers SrcElement Type Button KeyCode ShiftKey AltKey CtrlKey IE4+ Target Type Button KeyCode ShiftKey AltKey CtrlKey NN6