Dynamic HTML Tutorial:

EVENT HANDLING

Events are represented by an event object, whether as a parameter to your function, or as a member variable of the window object, such as window.event

Event handlers are Javascript code that are not added inside the <script> tags, but rather, inside the html tags, that execute Javascript when something happens, such as pressing a button, moving your mouse over a link, submitting a form, etc.

The basic syntax of these event handlers is shown as name_of_handler="JavaScript code here"

For example:

onClick="alert('hello!')"

The above code produces the following:
Click Here

Event Functions:

onclick:

The onclick: function is used to invoke Javascript upon clicking a link or form boxes as in the below example:

Clicking the above button invokes the inform() function. The event handler is added within the event that it handles, in this case, the form button event tag.

onload:

The onload: function invokes Javascript after the page or an image has finished loading.
The below example loads a secondary page, then closes it after the image has finished downloading.

Demo: onload: function

onmouseover:

The onmouseover: function is used to invoke Javascript when the mouse passes by or over a link.

Mouse over this link and look at the status bar message.

onmouseout:

The onmouseout: function is invoked when the mouse moves off of link.

the onmouseout="status=' '" clears the status after the mouse leaves the link. Whenever the mouse moves away from the link, the status bar is "reset" again. If you don't insert this code, the status bar will still have those words you entered into it even after taking away the cursor.

Dont' Click Here

The "status" refers to window.status, which is how you write to the status bar. Notice that instead of calling a function, we wrote directly the Javascript code within the handler : "status='You activated this alert when you clicked the button!';return true", This is ok, but it is important that you separate statements with ;. You could have, alternatively, written everything up until "return true" as a function and then calling it like:

function writestatus(){
status="You activated this alert when you clicked the button!"
}

Then, within the link tag, you would add onmouseover="writestatus();return true"

Note: You need to add the return true" code to set the status property with the mouseover effect.

onmousedown:

This used to invoke Javascript upon clicking an image or link:

Demo: onmousedown: function.

onmouseup and mousedown:

These are used to invoke Javascript upon clicking and releasing the mouse button over a link or image:

Demo: onmouseup: and onmousedown: functions.

onunload:

The onunload: event executes Javascript immediately after someone leaves the page. A common use of this function is to thank someone for viewing your page. Unfortunately, it is also commonly used to open other windows for advertisement purposes. Click below for an example.

Demo: onunload: function.

The example code for this is below:

<body onunload="alert('Thank you for visiting us!')">

Z-index:

This is used to place objects or elements in front of or behind other elements:

Demo: Z-index.

Nested Quotations

Nested quotations are used to specify what event you want the function to perform. Whenever you have nested quotations, the inner ones are always singled, as in the below code example:

onclick="document.write('hello')"

List of Common Event Handlers

Below is a list of common Javascript event handlers:

Event 		Occurs when... 
onabort 		a user aborts page loading 
onblur 		a user leaves an object 
onchange 		a user changes the value of an object 
onclick 		a user clicks on an object 
ondblclick 	a user double-clicks on an object 
onfocus 		a user makes an object active 
onkeydown 	a keyboard key is on its way down 
onkeypress 	a keyboard key is pressed 
onkeyup 		a keyboard key is released 
onload 		a page is finished loading. 
onmousedown 	a user presses a mouse-button 
onmousemove 	a cursor moves on an object 
onmouseover 	a cursor moves over an object 
onmouseout 	a cursor moves off an object 
onmouseup 	a user releases a mouse-button 
onreset 		a user resets a form 
onselect 		a user selects content on a page 
onsubmit 		a user submits a form 
onunload 		a user closes a page

And here are the parameters in which they can be used

Handlers
onAbort
onBlur
onClick
onChange
onError
onFocus
onLoad
onMouseover
onMouseout
onReset
onSelect
onSubmit
onUnload

Can be used with these tags:
images
windows, all form elements, frames
buttons, radio buttons,checkboxes, submit buttons, links
text fields, textareas, select lists
windows, images
windows, frames, and all form elements
body, images
areas, links
links
forms
text fields, textareas
submit button
body

Uncle Jim's Web Designs and Tutorials