Javascript event handler

JAVASCRIPT

Event HandlersonBlur, onChange, OnFocus, onMouseover,

onMouseout, and onSelect.

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/

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.

http://www.javascriptkit.com/

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.

EVENT HANDLERSEvent 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

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 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).

<HTML><HEAD><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> <INPUT TYPE="text"

onBlur="validate(this.value)"></FORM></BODY></HTML>

Browser ‘s Output

In this example, 'data' is a text field. When a user attempts to leave the field, the onBlur Event Handler calls the valid() function to confirm that 'data' has a legal value. Note that the keyword this is used to refer to the current object.

<HTML><HEAD><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><FORM><INPUT TYPE="text“VALUE=“Jesus" onChange="valid(this.value)“/>

</FORM></BODY></HTML>

Browser’s Output

In this example, 'data' is a text field. When a user attempts to leave the field after a change of the original value, the onChange Event Handler calls the valid() function which alerts the user about value that has been inputted.

<HTML><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" onFocus='alert("You focused in the

textbox!!")'></FORM></BODY></HTML>

In the above example, when you put your mouse on the text box, an alert() message displays a message.

Browser’s Output

<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.

http://www.sislands.com/coin70/week1/images/object.gif

<html><head><script>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>

Browser’s Output

• <script>• function myFunction()• {• alert("You have selected

some text!");• }• </script>• </head>• <body>

• Some text: <input type="text" value="Hello world!" onselect="myFunction()">

On the above example, when the value of the textbox was selected an alert box displays a message

Browser’s Output

MATCHING TYPE: Match Column A to Column B. Write your answer on the space provided.

COLUMN A

Event that it handlesCOLUMN B

Event Handler

_________1. The cursor moved over the object and mouse/pointing device was pressed down._________2. The cursor moved over the object._________3. User submitted a form._________4. User clicked on the object._________5. The object has loaded._________6. User has changed the object, then attempts to leave that field (i.e. clicks elsewhere)._________7. The cursor moved off the object._________8. User has reset a form._________9. User clicked twice on the object._________10. User selected some or all of the contents of the object.

a. onChangeb. onClickc. onDblClickd. onLoade. onMousedownf. onMouseoverg. onMouseouth. onReseti. onSelectj. onSubmit

Education

Javascript event handler