| Lesson 5: Events Today we will go into greater depth discussing Events in JavaScript, and how we can use them to recognize the individual actions of each user and prepare our pages to interact accordingly. Eveything from the moment a page loads, to the act of clicking on a button or changing the content of a text line, or even the moment a programming sub-routine (like a timer) is complete, all can be identified as events that JavaScript can respond to in any way the author chooses. 1) Events in JavaScript are broken up into various types, each one having charachteristics based upon it's type and the HTML object upon which it is dependant. For instance, onClick is a very common event handler that can be used on many different HTML objects, and the way it reacts/repsonds to programming or the user is based upon a combination of it's own basic event's charachteristics (the act of clicking on the HTML object) and the object upon which it occurs (a form button or checkbox ect, or a link either text or image ect). Here is a limited list of events handlers (check for cross-browser issues): onAbort onBlur onChange onClick onDblClick onError onFocus onKeyPress onLoad onMouseOut onMouseOver onReset onSubmit onUnload setTimeout [Note-setTimeout is a program defined event, as are onAbort and onError, yet they are still event handlers all the same] 2) Event Return Values Several of the event handlers return values (boolean in most cases) that indicate whether the event occured/has-completed or not. For instance, a form's onSubmit event handler would return a value of true once the form was successfully submitted, and false if it has not. JavaScript can use these return values to prevent events from occurring in the normal way, allowing you to create a completely new action for the form while preventing the normal action from occuring. Example: By adding a comparison to the onSubmit, we can create a form that will only go to the normal action when the comparison is met, and will return false otherwise preventing the normal action from occuring. Example: Return values depend upon the individual event handler, not following any structure for returning true or false, so it is advisable to study a good reference for individual event hanlder return values. [Note- when using onMouseOver for a link to alter the status bar message, most browsers show the link addy in the status bar, so we must use "return true;" to insure our message takes precedence: 3) Events as HTML Vs JavaScript Events and event handlers can be written into a page in two main ways: A) HTML Attributes In the above example, we looked at the onSubmit event handler of the HTML form tag. As you can see, it is a virtual script section contained by the double quotes just as the arguments for any HTML attribute. To make it easier, you could define all the scriping within the onSubmit as a function in script tags in the head section of your document and call to the function with the event handler (modular). B) JavaScript Properties Events can also be scripted with JavaScript alone in a script section by setting the appropriate event handler property of the object which will receive the actions of the event. The above example could have been written as plain HTML with a script block anywhere else defining or redefining the event handler. Example: The difference between declaring the event handlers as HTML attributes and/or JavaScript properites boils down to one of scope (and to a lesser extent, one of convenience, I find it more convenient to use HTML attributes, others will disagree). If a event handler is defined through HTML attribute tags, then it is defined as a portion of the HTML object those tags refer to, causing the scope to follow that object upward through the DOM. However, if an event handler is defined through JavaScript property settings, it is in effect a function, and it's scope would follow the normal scope chain for that function. [Note-scope is important for complex scripting, but only needs to be generally understood for 75% of all scripting] Sample 5- Define and Alter Event Handlers 1) HTML used to incorporate the script Notice that you can set event handlers either in your HTML attrbutes, or in a script section affecting the properites of the object the event handler is dependent upon, which also allows you to dynamically alter the event handlers on a page. Close attention to use of quotation marks is vital to incorporating scripting in HTML event hanlders! 2) DOM Almost every object in the DOM can be affected in some way by event hanlders, either through the event handler being triggered by an event on the object in question, or through the scripts triggered by an event on any object [note-the object the event occurs on does not even have to be in the same DOM, but with browser read/write priveleges, can be contained within a completely seperate top level window]. The scope chain affected by event handlers is based upon the method by which the event handler is defined. 3) User Interaction As you can see, by the use of event handlers, both HTML and JavaScript defined, you can direct your pages to interact with the user at virtually any point on the document the user can effect (or use, hence the term user?!?). Through clever use of, and defining, you can create pages that will never be the same twice, even changing right before the user's eyes! |