written 8.4 years ago by | • modified 8.4 years ago |
Mumbai University > Information Technology > Sem 4 > Web Programming
Marks: 10M
Year: May 2014
written 8.4 years ago by | • modified 8.4 years ago |
Mumbai University > Information Technology > Sem 4 > Web Programming
Marks: 10M
Year: May 2014
written 8.4 years ago by |
Various Events occurring on HTML page are:
An event handler executes a segment of a code based on certain events occurring within the application, such as onLoad, onClick.
JavaScript event handers 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
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.
onLoad: - 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. For example:
<IMG NAME="myimage" SRC="https://rhoque.com/ad_rh.jpg" onLoad="alert('You loaded myimage')">
Code:
<HTML>
<TITLE>Example of onLoad Event Handler</TITLE>
<HEAD>
<SCRIPT LANGUGE="JavaScript">
function hello(){
alert("Hello there...\nThis is an example of onLoad.");
}
</SCRIPT>
</HEAD>
<BODY onLoad="hello()">
<H3>Example of onLoad Event Handler</H3>
</BODY>
</HTML>
onClick:
Except for the regular button and the area, the onClick event handler can return false to cancel the action. For example:
<INPUT TYPE="submit" NAME="mysubmit" VALUE="Submit" onClick="return confirm(`Are you sure you want to submit the form?')">
Note: On Windows platform, the onClick event handler does not work with reset
See Example:
<HTML>
<HEAD>
<TITLE>Example of onClick Event Handler</TITLE>
<SCRIPT LANGUAGE="JavaScript">
function valid(form){
var input=0;
input=document.myform.data.value;
alert("Hello " + input + " ! Welcome...");
}
</SCRIPT>
</HEAD>
<BODY>
<H3> Example of onClick Event Handler </H3>
Click on the button after inputting your name into the text box:<br>
<form name="myform">
<input type="text" name="data" value="" size=10>
<INPUT TYPE="button" VALUE="Click Here" onClick="valid(this.form)">
</form>
</BODY>
</HTML>
onSubmit:
An onSubmit event handler calls JavaScript code when the form is submitted.
Example:
<HTML>
<TITLE> Example of onSubmit Event Handler </TITLE>
<HEAD>
</HEAD>
<BODY>
<H3>Example of onSubmit Event Handler </H3>
Type your name and press the button<br>
<form name="myform" onSubmit="alert('Thank you ' + myform.data.value +'!')">
<input type="text" name="data">
<input type="submit" name ="submit" value="Submit this form">
</form>
</BODY>
In this example, the onSubmit event handler calls an alert() function when the button "Sumbit this form" is pressed.
onMouseOut:
Example:
<HTML>
<TITLE> Example of onMouseOut Event Handler </TITLE>
<HEAD>
</HEAD>
<BODY>
<H3> Example of onMouseOut Event Handler </H3>
Put your mouse over <A HREF="" onMouseOut="window.status='You left the link!' ; return true;"> here</a> and then take the mouse pointer away.
</BODY>
</HTML>