Home | | Internet Programming | HTML - Event model

Chapter: Web or internet Programming : Dynamic HTML

HTML - Event model

HTML - Event model - Dynamic HTML

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>




Study Material, Lecturing Notes, Assignment, Reference, Wiki description explanation, brief detail
Web or internet Programming : Dynamic HTML : HTML - Event model |


Privacy Policy, Terms and Conditions, DMCA Policy and Compliant

Copyright © 2018-2023 BrainKart.com; All Rights Reserved. Developed by Therithal info, Chennai.