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>
No comments:
Post a Comment