Photography web hosting - 191Chapter 14Document Object Model EssentialsThe W3C event model
191Chapter 14Document Object Model EssentialsThe W3C event model also introduces a new concept called the event listener. An event lis- tener is essentially a mechanism that instructs an object to respond to a particular kind ofevent very much like the way the event handler attributes of HTML tags respond to events. But the DOM recommendation points out that it prefers use of a more script-oriented way ofassigning event listeners: the addEventListener()method available for every node in thedocument hierarchy. Through this method, you advise the browser whether to force an eventto bubble up the hierarchy (the default behavior that is also in effect if you use the HTMLattribute type of event handler) or to be captured at a higher level. Functions invoked by the event listener receive a single parameter consisting of the eventobject whose properties contain contextual details about the event (details such as the posi- tion of a mouse click, character code of a keyboard key, or a reference to the target object). For example, if a form includes a button whose job is to invoke a calculation function, theW3C DOM prefers the following way of assigning the event handler: document.getElementById( calcButton ).addEventListener( click , doCalc, false); The addEventListener()method takes three parameters. The first parameter is a string ofthe event to listen for; the second is a reference to the function to be invoked when that eventfires; and the third parameter is a Boolean value. When you set this Boolean value to true, itturns on event capture whenever this event is directed to this target. The function then takesits cue from the event object passed as the parameter: function doCalc(evt) { // get shortcut reference to input button s formvar form = evt.target.form; var results = 0; // other statements to do the calculation// form.result.value = results; } To modify an event listener, you use the removeEventListener()method to get rid of theold listener and then employ addEventListener()with different parameters to assign thenew one. Preventing an event from performing its default action is also a different procedure in theW3C event model than in IE. In IE4 (as well as NN3 and NN4), you can cancel the defaultaction by allowing the event handler to evaluate to return false. While this still works inIE5+, Microsoft includes another property of the window.eventobject, called returnValue. Setting that property to falseanywhere in the function invoked by the event handler alsokills the event before it does its normal job. But the W3C event model uses a method of theevent object, preventDefault(), to keep the event from its normal task. You can invoke thismethod anywhere in the function that executes when the event fires. Detailed information about an event is contained in an event object that must be passed to anevent handler function where details may be read. If you assign event handlers via the W3CDOM addEventListener()method or an event handler property, the event object is passedautomatically as the sole parameter to the event handler function. Include a parameter vari- able to catch the incoming parameter: function swap(evt) { // statements here to work with W3C DOM event object} But if you assign events via a tag attribute, then you must explicitly pass the event object inthe call to the function: