Photo web hosting - 169Chapter 14Document Object Model Essentials the value of
169Chapter 14Document Object Model Essentials the value of the object s onfocus(all lowercase) property isfunction onfocus() { doIt(); } You can, however, assign an entirely different function to an event handler by assigning afunction reference to the property. Such references don t include the parentheses that arepart of the function s definition. (You see this again much later in Chapter 33 when you assignfunctions to object properties.) Using the same text field definition you just looked at, you can assign a different function tothe event handler because based on user input elsewhere in the document you want the fieldto behave differently when it receives the focus. If you define a function like this: function doSomethingElse() { statements} you can then assign the function to the field with this assignment statement: document.formName.entry.onfocus = doSomethingElse; Because the new function reference is written in JavaScript, you must observe case for the func- tion name. Although NN4 accepts interCap versions of the event handler names, you are bestserved across all browsers by sticking with all lowercase event handler names as properties. Be aware, however, that as with several settable object properties that don t manifest them- selves visually, any change you make to an event handler property disappears with a docu- ment reload. Therefore, I advise you not to make such changes except as part of a script thatalso invokes the event handler like a method: Any gap in time leaves room for users toreload the page accidentally or intentionally. If your scripts create new element objects dynamically, you can assign event handlers tothese objects by way of event handler properties. For example, the following code uses W3CDOM syntax to create a new button input element and assign an onclickevent handler thatinvokes a function defined elsewhere in the script: var newElem = document.createElement( input ); newElem.type = button ; newElem.value = Click Here ; newElem.onclick = doIt; document.forms[0].appendChild(newElem); Because every event handler operates as both property and method, I don t list these proper- ties and methods as part of each object s definition in the next chapters. You can be assuredthis feature works for every JavaScript object that has an event handler starting withNavigator 3 and Internet Explorer 4. Object Model SmorgasbordA survey of the entire evolution of scriptable browsers from NN2 and IE3 through IE6 andMoz1 reveals six (yes, six!) distinct document object model families. Even if your job entailsdeveloping content for just one current browser version, you may be surprised that familymembers from more than one document object model inhabit your authoring space. Caution