social pharmacy d-pharm 1st year by Pragati K. Mahajan
Javascript event handler
1.
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/
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.
