Event Properties
- x -Mouse x coordinate when the event happened.
- y -Mouse y coordinate when the event happened.
JavaScript defines five types of events which are form, image, image map, link, and window events. Events are associated with HTML tags. The definitions of the events described below are as follows:
Form Events
- blur - The input focus was lost.
- change - An element lost the focus since it was changed.
- focus - The input focus was obtained.
- reset - The user reset the object, usually a form.
- select - Some text is selected
- submit - The user submitted an object, usually a form.
Image Events
- abort - A user action caused an abort.
- error - An error occurred.
- load - The object was loaded.
Image Map Events
- mouseOut - The mouse is moved from on top a link.
- mouseOver - The mouse is moved over a link.
Link Events
- click - An object was clicked.
- mouseOut - The mouse is moved from on top a link.
- mouseOver - The mouse is moved over a link.
Window Events
- blur - The input focus was lost.
- error - An error occurred.
- focus - The input focus was obtained.
- load - The object was loaded.
- unload - The object was exited.
Event Association
Events are associated with HTML tags. The definitions of the events described below are as follows:
- abort - A user action caused an abort of an image or document load.
- blur - A frame set, document, or form object such as a text field loses the focus for input.
- click - Happens when a link or image map is clicked on
- change - Happens when a form field is changed by the user and it loses the focus.
- error - An error happened loading a image or document.
- focus - A frame set, document, or form object such as a text field gets the focus for input.
- load - The event happens when an image or HTML page has completed the load process in the browser.
- mouseOut - The event happens when the mouse is moved from on top of a link or image map
- mouseOver - The event happens when the mouse is placed on a link or image map.
- reset - The user reset the object which is usually a form.
- submit - The user submitted an object which is usually a form.
- unload - The object such as a framesed or HTML document was exited by the user.
The events for each HTML tag are as follows:
- <A>
- click (onClick)
- mouseOver (onMouseOver)
- mouseOut (onMouseOut)
- <AREA>
- mouseOver (onMouseOver)
- mouseOut (onMouseOut)
- <BODY>
- blur (onBlur)
- error (onError)
- focus (onFocus)
- load (onLoad)
- unload (onUnload)
- <FORM>
- submit (onSubmit)
- reset (onReset
- <FRAME>
- blur (onBlur)
- focus (onFocus)
- <FRAMESET>
- blur (onBlur)
- error (onError)
- focus (onFocus)
- load (onLoad)
- unload (onUnload)
- <IMG>
- abort (onAbort)
- error (onError)
- load (onLoad)
- <INPUT TYPE = "button">
- click (onClick)
- <INPUT TYPE = "checkbox">
- click (onClick)
- <INPUT TYPE = "reset">
- click (onClick)
- <INPUT TYPE = "submit">
- click (onClick)
- <INPUT TYPE = "text">
- blur (onBlur)
- focus (onFocus)
- change (onChange)
- select (onSelect)
- <SELECT>
- blur (onBlur)
- focus (onFocus)
- change (onChange)
- <TEXTAREA>
- blur (onBlur)
- focus (onFocus)
- change (onChange)
- select (onSelect)
Event Handlers
Event handlers are created as follows:
onEvent = "Code to handle the event"
The following example demonstrates its use:
<a href="/independent/index.html" target="_top" onMouseOver="window.status='To Independent Technologies Section' ;return true" onMouseOut="window.status='';return true"><img SRC="gifs/greenindependentbutton2.gif" ALT="Independent Technologies" VSPACE=3 BORDER=0 height=35 width=120></a><BR>
As you can see, the event handling attribute is included in the HTML tag. When multiple statements are included in the event handling code, the statements are separated by a semicolon.
The following example can be used to redirect a link to another location:
<HTML>
<HEAD>
<TITLE>Using functions as event handlers</TITLE>
<SCRIPT LANGUAGE="JavaScript">
<!--
function nameDefined(ckie,nme)
{
var splitValues
var i
for (i=0;i<ckie.length;++i)
{
splitValues=ckie[i].split("=")
if (splitValues[0]==nme) return true
}
return false
}
function delBlanks(strng)
{
var result=""
var i
var chrn
for (i=0;i<strng.length;++i) {
chrn=strng.charAt(i)
if (chrn!=" ") result += chrn
}
return result
}
function getCookieValue(ckie,nme)
{
var splitValues
var i
for(i=0;i<ckie.length;++i) {
splitValues=ckie[i].split("=")
if(splitValues[0]==nme) return splitValues[1]
}
return ""
}
function testCookie(cname, cvalue) { //Tests to see if the cookie
var cookie=document.cookie //with the name and value
var chkdCookie=delBlanks(cookie) //are on the client computer
var nvpair=chkdCookie.split(";")
if(nameDefined(nvpair,cname)) //See if the name is in any pair
{
tvalue=getCookieValue(nvpair,cname) //Gets the value of the cookie
if (tvalue == cvalue) return true
else return false
}
else return false
}
function redirectLink() {
if (testCookie("javahere", "yes")) {
window.location="javahere.html"
}
else{
var futdate = new Date()
var expdate = futdate.getTime()
expdate += 3600*1000 //expires in 1 hour(milliseconds)
futdate.setTime(expdate)
var newCookie="javahere=yes; path=/;"
newCookie += " expires=" + futdate.toGMTString()
window.document.cookie=newCookie
window.location="javanot.html"
}
}
//-->
</SCRIPT>
</HEAD>
<BODY>
<H3>Using an event handler to direct a link based on a cookie value</H3>
<P>
<A NAME="Here" onClick="return redirectLink()">See if you've been here.</A>
</P>
</BODY>
</HTML>
Recommend to a friend