JavaScript EventsJavaScript Events are items that transpire based on an action. A document event is the loading of an HTML document. A form event is the clicking on a button. Events are objects with properties.Event Properties
Form Events
Image Events
Image Map Events
Link Events
Window Events
|
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.
- <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:
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>
