• Like
Javascript event handler
Upcoming SlideShare
Loading in...5

Javascript event handler

Uploaded on


More in: Education
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
    Be the first to like this
No Downloads


Total Views
On Slideshare
From Embeds
Number of Embeds



Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

    No notes for slide


  • 1. JAVASCRIPT EVENTS• Javascript-enabled Web pages are typically event driven. Events are actions that occur on the Web page. Generally speaking they occur when.• Your browser does something such as loading or unloading a page.• You do something like clicking a button, moving your mouse over a link, or moving your cursor into or out a form element.• If these events which cause JavaScript code to spring into action. Each JavaScript event has a corresponding event handler that is charged with the responsibility of automatically responding to it when it occurs. Reference: http://www.wvu.edu˜ support/training/classmat/js/
  • 2. EVENT HANDLERS• Event handlers execute JavaScript code to respond to events whenever they occur.• They what makes JavaScript so useful in creating interactive Web sites. Understanding "event handlers" in JavaScript• So, what are event handlers? Very powerful and useful! They 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: Reference: Copyright © 1997-2012 JavaScript Kit.
  • 3. Event Handlers can be divided into two parts:• interactive Event Handlers and• non-interactive Event Handlers• An interactive Event Handler is the one that depends on the user interactivity with the form or the document. For example, onMouseOver is an interactive Event Handler because it depends on the users action with the mouse.• On the other hand non-interactive Event Handler would be onLoad, because this Event Handler would automatically execute JavaScript code without the users interactivity.
  • 4. EVENT HANDLERSEvent Handler Event that it handlesonBlur User has left the focus of the object. For example, they clicked away from a text field that was previously selected.onChange User has changed the object, then attempts to leave that field (i.e. clicks elsewhere).onClick User clicked on the object.onDblClick User clicked twice on the object.onFocus User brought the focus to the object (i.e. clicked on it/tabbed to it)onKeydown A key was pressed over an element.onKeyup A key was released over an element.onKeypress A key was pressed over an element then released.onLoad The object has loaded. Reference: quackit.com
  • 5. Event Handler Event that it handlesonMousedown The cursor moved over the object and mouse/pointing device was pressed down.onMouseup The mouse/pointing device was released after being pressed down.onMouseover The cursor moved over the object (i.e. user hovers the mouse over the object).onMousemove The cursor moved while hovering over an object.onMouseout The cursor moved off the objectonReset User has reset a form.onSelect User selected some or all of the contents of the object. For example, the user selected some text within a text field.onSubmit User submitted a form.onUnload User left the window (i.e. user closes the browser window).
  • 6. <HTML><HEAD> Browser ‘s Output<TITLE>Example of onBlur Event Handler</TITLE><SCRIPT>function validateAnswer(answer) {if (answer == "Brendan Eich"){alert("Your answer is correct");}else{alert("Your answer is wrong") }}</SCRIPT></HEAD><BODY><H3> Example of onBlur Event Handler</H3>Who created the JavaScript?:<BR><FORM> In this example, data is a text field. When a <INPUT TYPE="text" user attempts to leave the field, onBlur="validate(this.value)"> the onBlur Event Handler calls the valid()</FORM> function to confirm that data has a legal</BODY> value. Note that the keyword this is used to refer to the current object.</HTML>
  • 7. <HTML><HEAD> Browser’s Output<TITLE>Example of onChange EventHandler</TITLE><SCRIPT>function valid(input){ alert("You have changed the value from Jesus to " + input);}</SCRIPT></HEAD><BODY><H3>Example of onChange EventHandler</H3>Try changing the value from Jesus to something else:<BR> In this example, data is a text field.<FORM> When a user attempts to leave the field after a change of the original<INPUT TYPE="text“ value, the onChange Event HandlerVALUE=“Jesus" onChange="valid(this.value)“/> calls the valid() function which alerts </FORM></BODY></HTML> the user about value that has been inputted.
  • 8. <HTML> Browser’s Output<HEAD><TITLE>Example of on Focus Event Handler</TITLE></HEAD><BODY><H3>Example of onFocus Event Handler</H3>Click your mouse in the textbox:<BR><FORM><INPUT TYPE="text" In the aboveonFocus=alert("You focused in the textbox!!")> example, when you put your mouse on</FORM> the text box,</BODY> an alert() message</HTML> displays a message.
  • 9. <IMG SRC="images/object.gif" NAME="jsobjects" onLoad="alert(You loaded my image)"> Browser’s Output An onLoad event occurs when a window or image finishes loading. For windows, this Event Handler is specified in the <BODY> attribute of the window. In an image, the Event Handler will execute handler text when the image is loaded.
  • 10. <html><head><script> Browser’s Outputfunction bigImg(x){x.style.height="64px";x.style.width="64px";}function normalImg(x){x.style.height="32px";x.style.width="32px";}</script></head><body><img onmouseover="bigImg(this)" onmouseout="normalImg(this)" border="0" src="grasshopper.gif" alt=“Grasshopper" width="32" height="32"><p>The function bigImg() is triggered when the user moves the mouse pointer over the image.</p><p>The function normalImg() is triggered when the mouse pointer is moved out of the image.</p></body></html>
  • 11. Browser’s Output• <script>• function myFunction()• {• alert("You have selected some text!");• }• </script>• </head>• <body>• Some text: <input type="text" value="Hello world!" On the above example, when the value of the textbox was selected onselect="myFunction()"> an alert box displays a message
  • 12. MATCHING TYPE: Match Column A to Column B. Write your answer on the space provided. COLUMN A COLUMN B Event that it handles Event Handler_________1. The cursor moved over the object and a. onChangemouse/pointing device was pressed down. b. onClick_________2. The cursor moved over the object. c. onDblClick_________3. User submitted a form. d. onLoad_________4. User clicked on the object. e. onMousedown_________5. The object has loaded. f. onMouseover_________6. User has changed the object, then attempts g. onMouseoutto leave that field (i.e. clicks elsewhere). h. onReset_________7. The cursor moved off the object. i. onSelect_________8. User has reset a form. j. onSubmit_________9. User clicked twice on the object._________10. User selected some or all of the contents ofthe object.