Javascript event handler
Download as PPTX, PDF•5 likes•5,117 views
Here are the matches between Column A and Column B: 1. e 2. f 3. j 4. b 5. d 6. a 7. g 8. h 9. c 10. i
Javascript event handler
- 2. 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/
- 3. 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.
- 4. 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 user's interactivity.
- 5. EVENT HANDLERS Event Handler Event that it handles onBlur 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
- 6. Event Handler Event that it handles onMousedown 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 object onReset 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).
- 7. <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>
- 8. <HTML><HEAD> Browser’s Output <TITLE>Example of onChange Event Handler</TITLE> <SCRIPT> function valid(input) { alert("You have changed the value from Jesus to " + input);} </SCRIPT> </HEAD> <BODY> <H3>Example of onChange Event Handler</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 Handler VALUE=“Jesus" onChange="valid(this.value)“/> calls the valid() function which alerts </FORM></BODY></HTML> the user about value that has been inputted.
- 9. <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 above onFocus='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.
- 10. <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.
- 11. <html><head><script> Browser’s Output function 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>
- 12. 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
- 13. 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. onChange mouse/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. onMouseout to 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 of the object.