Event Handler - Fog.ccsf.edu
advertisement
CNIT 133 Interactive Web Pags –
JavaScript and AJAX
Event and Event Handling
Agenda
• My Web Site: http://fog.ccsf.edu/~hyip
(download syllabus, class notes).
• Event and Event handling.
• Event samples.
Event and Event Handler Defined
• Events: are visitor and browser activities. (the
phone rings)
• Event handlers: are the mechanisms that
allow us to capture and actually respond to
those events with a scripting language. (pick
up the phone and say, “Hello”)
Writing Event Handlers
• Event handlers: are written inline with HTML,
just like an HTML attribute. Therefore, Event
handlers also called intrinsic event attributes.
(the only different is that Event Handler
executes JS script or function).
• HTML Tag: <p align=“right”>
• Event handler/intrinsic event attribute: <body
onLoad=“alert(‘Hello’)”>
Events and Event Handling
• JavaScript programs use an event-driven programming model.
• The web browser generates an event whenever something
interesting happens to the document or to some element of
it. For example, the web browser generates an event when it
finishes loading a document, when the user moves the mouse
over a hyperlink, or when the user clicks on a button in a form
• If a JavaScript application cares about a particular type of
event for a particular document element, it can register an
event handler – a JavaScript function or snippet of code – for
that type of event on the element of interest. Then, when the
particular event occurs, the browser invokes the handler
code.
• All application with graphical user interfaces are designed this
way: they sit around waiting for the user to do something
interesting (i.e. they wait for events to occur), and then they
respond.
Events and Event Handling
• Three distinct and incompatible eventhandling models are in used:
The original event model
The standard event model
The Internet Explorer event model
Basic Event Handling
• In the original event model, event-handling code is
specified using the attributes of HTML elements.
Thus, if your application needs to know when the
user moves the mouse over a specific hyperlink, you
use the onmouseover attribute of the <a> tag that
defines the hyperlink.
• If the application needs to know when the user clicks
the Submit button, you use the onClick attribute of
the <input> tag that defines the button or the
onsubmit attribute of the <form> element that
contains that button.
Basic Event Handling
•
•
There are quite a few different event-handler attributes that you can use in the
original event model.
They are :
onblur
onchange
onclick
onfocus
onkeydown
onkeypress
onkeyup
onload
onmousedown
onmousemove
onmouseout
onmouseover
onmouseup
onsubmit
onunload
Event Handler Return Values
• In many cases, an event handler uses its return value to
indicate the disposition of the event. For example, if you
use the onsubmit event handler of a Form object to
perform form validation and discover that the user has
not filled in all the fields, you can return false from the
handler to prevent the form from actually being
submitted:
<form action = "search.cgi"
onsubmit="if (this.elements[0].value.length == 0) return false; ">
<input type = "text">
</form>
Event Handlers and the this
Keyword
• When your event handler is invoked, it is
invoked as a method of the element on which
the event occurred, so the this keyword refers
to that target element:
<input type="button" value="press me" onclick = "callfunc(this);">
// the this keyword refers to the Button object.
The Pseudo-protocol & the void
operator
•
•
The pseudo-protocol (javascript:) in the href attribute of an <a> or <area> tag: the
idea is that instead of requesting a document, the JS pseudo-protocol will instead
execute one or more JS statements, which may or may not return a URL to the
href.
The void operator: tells the interpreter to evaluate an expression and return no
value.
void (expression) or void expression
NOTE: void is an operator, not a function, where expression is an expression to be
evaluated. Parentheses are optional.
•
You want to make certain that a statement called via the pseudo-protocol does not
return a value and provoke the link to load a new document indicated by the
returned value. The void operator will ensure that no value is returned to the
hypertext link at all.
Intrinsic Event Attributes
Event
Intrinsic Event Attribute
Load
onLoad (associated with windows, images)
Unload
onUnload (associated only with windows)
Click
onClick (associated with any elements)
MouseOver
onMouseOver (associated with any elements)
MouseOut
onMouseOut (associated with any elements)
Focus
onFocus (associated with windows, frames, links, and form
elements)
Blur
onBlur (associated with windows, frames, links, and form
elements)
Submit
onSubmit (associated with forms)
Reset
onReset (associated with forms)
Select
onSelect (associated with text boxes, password, text areas)
Change
onChange (associated with text boxes, text areas, password,
file uploads, select lists)
Event – onload sample
<html>
<head>
<script language= "JavaScript" type="text/javascript">
function mymessage()
{
alert("This message was triggered from the onload event");
}
</script>
</head>
<body onload="mymessage()">
</body>
</html>
Event – onunload sample
<html>
<head>
<script type="text/javascript">
function mymessage()
{
alert("This message was triggered from the onunload event");
}
</script>
</head>
<body onunload="mymessage()">
<p>An alert box will display a message when you close this document!</p>
</body>
</html>
Event – onchange sample
<html>
<head>
<script type="text/javascript">
function preferedBrowser()
{
prefer=document.forms[0].browsers.value;
alert("You prefer browsing internet with " + prefer);
}
</script>
</head>
<body>
<form>
Choose which browser you prefer:
<select id="browsers" onchange="preferedBrowser()">
<option value="Internet Explorer">Internet Explorer
<option value="Netscape">Netscape
</select>
</form>
</body>
</html>
Event – onsubmit sample
<html>
<head>
<script type="text/javascript">
function confirmInput()
{
fname=document.forms[0].fname.value;
alert("Hello " + fname + "! You will now be redirected to www.ccsf.edu");
}
</script>
</head>
<body>
<form onsubmit="confirmInput()" action="http://www.ccsf.edu/">
Enter your name: <input id="fname" type="text" size="20">
<input type="submit">
</form>
</body>
</html>
Event – onblur sample
<html>
<head>
<script type="text/javascript">
function message()
{
alert("This alert box was triggered by the onblur event handler");
}
</script>
</head>
<body>
<p>The onblur event occurs when an element loses focus. Try to click or write in the
input field below, then click elsewhere in the document so the input field loses
focus.</p>
<form>
Enter your name: <input type="text" onblur="message()" size="20">
</form>
</body>
</html>
Event – onfocus sample
<html>
<head>
<script type="text/javascript">
function message()
{
alert("This alert box was triggered by the onfocus event handler");
}
</script>
</head>
<body>
<form>
Enter your name: <input type="text" onfocus="message()" size="20">
</form>
</body>
</html>
Event – onmouseover &
onmouseout sample
<html>
<body>
<h1 onmouseover="style.color='red'"
onmouseout="style.color='black'">
Mouse over this text</h1>
</body>
</html>
Event – onclick sample
<html>
<head>
<script type="text/javascript">
function disp_func() {
Alert(“This alert box was triggered by the onclick event handler”);
}
</script>
</head>
<body>
<input type=“button” value=click to display message” onclick=“disp_func();”>
</body>
</html>
Event – onmousemove sample
<html>
<head>
<script type="text/javascript">
var i=1;
function moveright()
{
document.getElementById('header').style.position="relative";
document.getElementById('header').style.left=i;
i++;
}
</script>
</head>
<body onmousemove="moveright()">
<h1 id="header">
Move the mouse over this page
</h1>
</body>
</html>
In-class sample 0
•
•
•
•
<html>
<head><title>Events</title>
<script language="JavaScript" type="text/javascript">
function callHandler(str) {
•
•
•
•
•
•
•
•
•
•
•
•
•
•
•
•
•
}
</script>
</head>
<body>
<h1>Event and Event Handler</h1>
<p>Move the mouse to this text and see.
Then move the mouse out of the text and see!!</p>
<a href="">Click Here</a>
<br>
<form action="" method="post">
Text Box: <input type="text">
<br>
<input type="submit">
<input type="reset">
</form>
</body>
</html>
In-class sample 1
<html>
<head><title>Events</title>
<script language="JavaScript" type="text/javascript">
function callHandler(str) {
alert(str);
}
</script>
</head>
<body onLoad="callHandler('Welcome!')" onUnload="callHandler('c ya!')">
<h1>Event and Event Handler</h1>
<p onMouseOver="callHandler('Mouse is on top of this text')" onMouseOut="callHandler('Mouse is away from this text')">Move the mouse to this text and
see.
Then move the mouse out of the text and see!!</p>
<a href="javascript: callHandler('Ouch!')">Click Here</a>
<!-- or use this format
<a href="javascript: void(0)" onClick="callHandler('Ouch!')">Click Here</a>
-->
<br>
<form action="" method="post" onSubmit="callHandler('Form submitted! Thank you!')"
onReset="callHandler('Reset event'); return confirm('Are you sure to reset?')">
Text Box: <input type="text" onFocus="callHandler('Focus to text box')" onBlur="callHandler('Text box lost focus')" onChange="call Handler('Text box
changes data!')"
onSelect="callHandler('Selected some text in text box')">
<br>
<input type="submit">
<input type="reset">
</form>
</body>
</html>
