Event Handlers

Event handlers are probably one of the most powerful and useful tools that JavaScript gives its user. In a very simple example they all things such as mouseovers or changing the color of a webpage with the simple click of a button. This table provides a quick example of a mouseover.

Event handlers are scripts that are not contained within the <script> tag. They are embedded within the document itself. Refer to Figure 6.1 to see the code which made the above mouseover possible.

In the above figure, onmouseout is actually the event handler, as well as onmouseover. They describe an event that takes place within a page and then execute code that exists after them. What it is saying is that onmouseover (when the mouse goes over this object), document.MOUSE.src which is saying that within this document, the object named MOUSE (which is what our image is named), the src (source) of that document should be changed to ../images/mouseover1.gif. Then the same goes for onmouseout (when the mouse leaves this object) right below it. Note that by removing the onmouseout event handler and the image would stay mouseover1.gif even after you took your mouse off of it. This same event handler can be used to change page color, text color, and many other attributes on a page including alerts, prompts and confirm boxes.

Complete List of Event Handlers

• onAbort - Executes when the user aborts the loading of an image.
• onBlur - Executes when a form element loses focus or when a window or frame loses focus.
• onChange - Executes when select, text, or textarea field loses focus and its value has been modified.
• onClick - Executes when an object on a form is clicked.
• onDblClick - Executes when the user double-clicks a form element or a link.
• onDragDrop - Executes when the user drops an object (e.g. file) onto the browser window.
• onError - Executes when loading of a document or image causes an error.
• onFocus - Executes when window, frame, frameset or form element receives focus.
• onKeyDown - Executes when the user depresses a key.
• onKeyPress - Executes when the user presses or holds down a key.
• onKeyUp - Executes when user releases a key.
• onLoad - Executes after the browser finishes loading a window or all of the frames within a frameset.
• onMouseDown - Executes when the user depresses a mouse button.
• onMouseMove - Executes when the user moves the cursor.
• onMouseOut - Executes when the cursor leaves an area or link.
• onMouseOver - Executes when the cursor moves over an object or area.
• onMouseUp - Executes after the user releases a mouse button.
• onMove - Executes when the user or script moves a window or frame.
• onReset - Executes after the user resets a form.
• onResize - Executes when the user or script resizes a window or frame.
• onSelect - Executes when the user selects some of the text within a text or textarea field.
• onSubmit - Executes when the user submits a form.
• onUnload - Executes when the user exits a document.