Chapter: Web or internet Programming : Dynamic HTML
HTML - Event model
Event model
Event onclick
<head>
<title>DHTML
Event Model - onclick</title>
<!--
The for attribute declares the script for -->
<!-- a
certain element, and the event for a --> <!-- certain event. -->
<script
type = "text/javascript" for = "para" event =
"onclick">
<!--
alert(
"Hi there" ; </script></head><body>
<!--
The id attribute gives a unique identifier --> <p id =
"para">Click on this text!</p>
<!-- You can specify event handlers inline
--> <input type = "button" value =
"Click
Me!" onclick = "alert( 'Hi again' )" />
</body>
</html>
Event onload
• The
onload event fires whenever an element finishes loading successfully.
• Frequently,
this event is used in the body element to initiate a script after the page
loads into the client.
• The
script called by the onload event, updates a timer that indicates how many
seconds have elapsed since the document has been loaded.
onmousemove
<head>
<title>DHTML
Event Model - onmousemove event</title>
<script
type = "text/javascript">
<!--
function
updateMouseCoordinates()
{
coordinates.innerText
= event.srcElement.tagName + " (" + event.offsetX + ", " +
event.offsetY + ")";
}
// -->
</script>
</head>
<body
style = "back-groundcolor: wheat" onmousemove =
"updateMouseCoordinates()">
<span
id = "coordinates">(0, 0)</span><br />
<img
src = "deitel.gif" style = "position:
</html>
absolute; top: 100; left: 100" alt = "Deitel" />
</body>
More Form Processing with onsubmit and onreset <head>
<title>
DHTML
Event Model - onsubmit and onreset events </title>
<script
type = "text/javascript"> <!-- var helpArray =
[
"Enter your name in this input box.",
"Enter
your email address in this input box, " + "in the format
user@domain.",
"Check
this box if you liked our site.",
"In
this box, enter any comments you would " + "like us to read.",
"This
button submits the form to the " +
"server-side
script",
"This
button clears the form",
"This
textarea provides context-sensitive " + "help. Click on any input
field or use the Tab " + "key to get more information about " +
"the
input field." ];
function
helpText( messageNum )
{
myForm.helpBox.value
= helpArray[ messageNum ];
}
function formSubmit() { window.event.returnValue =
false;
if ( confirm ( "Are you sure you want to
submit?" ) ) window.event.returnValue = true;
}
function
formReset()
{
window.event.returnValue
= false;
if ( confirm( "Are you sure you want to
reset?" ) ) window.event.returnValue = true;
}
// -->
</script> </head> <body>
<form
id = "myForm" onsubmit = "formSubmit()" onreset =
"formReset()" action = ""> Name: <input type =
"text" name = "name" onfocus = "helpText(0)"
onblur =
"helpText(6)" /><br />
Email:
<input type = "text" name = "email" onfocus =
"helpText(1)" onblur = "helpText(6)" /><br />
Click
here if you like this site
<input
type = "checkbox" name = "like" onfocus =
"helpText(2)" onblur = "helpText(6)" /><hr />
Any comments?<br
/>
<textarea
name = "comments" rows = "5" cols = "45" onfocus
= "helpText(3)" onblur = "helpText(6)">
</textarea><br
/>
<input
type = "submit" value = "Submit" onfocus =
"helpText(4)" onblur = "helpText(6)" />
<input
type = "reset" value = "Reset" onfocus =
"helpText(5)" onblur = "helpText(6)" />
<textarea
name = "helpBox" style = "position: absolute; right:0; top:
0" rows = "4" cols = "45">
This
textarea provides context-sensitive help. Click on any input field or use the
Tab key to get more information about the input field. </textarea>
</form>
</body>
</html>
Related Topics