Event Handlers:
- onAbort: An onAbort event handler executes Javascript code when the user aborts loading an images.
For example:
<html>
<head>
<title>Example of onAbort</title>
</head>
<body>
<h3>Example of onAbort Event Handler</h3>
<b>Stop the loading of this image and see what happens</b><p>
<img src="image.jpg" onAbort="alert('You stopped the loading the image')">
</body>
</html>
Here an alert( ) method is called using the onAbort event handler when the user aborts loading the image.
- onBlur: An onBlur event handler executes Javascript code when input focus leaves the field of a text,textarea or a select option.For windows,frames and frameset, the event handler executes Javascript code when the window loses focus.In window, you need to specify the event handler in the <body> attribute.Such as
<body bgcolor='#FFFFFF' onBlur="document.bgcolor"='#0000000'>
NOTE: On a windows platform, the onBlur event does not work with <frameset>.
For example:
<html>
<head>
<title>Example of onBlur Event Handler</title>
<script>
function validate (value)
{
if(value < 0)
alert("Please input a value that is greater or equal to 0");
}
</script>
</head>
<body>
<h3>Example of onBlur Event Handler</h3>
Try inputting a value less than zero<br>
<form>
<input type="text" onBlur="validate(this.value)">
</form>
</body>
</html>
In this example, 'data' is a text field,when a user attempts to leave the field , the onBlur event handler calls the valid( ) function to confirm that 'data' has a legal value.Note that the keyword 'this' is used to refer to the current object.
- onChange: The onChange event handler executes javascript code when input focus exits the field after the user modifies its text.
For example:
<html>
<head>
<title>Example of Change Event Handler</title>
<script>
function valid (input)
{
alert("You have changed the value from 10 to " + input)
}
</script>
</head>
<body>
<h3>Example of onChange Event Handler</h3>
Try changing the value from 10 to something else:-<br>
<form>
<input type="text" value="10" onChange="valid(this.value)">
</form>
</body>
</html>
In this example,'data' is a text field,when a user attempt to leave the field after the change of the original values, the onChange event handler calls the valid( ) function which alerts the user about the value that has been inputted.
- onClick: In an onClick event handler, Javascript function is called when an object in a button(regular,radio,reset and submit) is clicked,a link is pushed, a checkbox is checked or an image map area is selected except for the regular button and the area, the onClick event handler can return false to cancel the action such as
<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 button.
For example:
<html>
<head>
<title>Example of onClick Event Handler</title>
<script>
function valid(form)
{
var input=form.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>
<input type="text" name="data">
<input type=button value=Click Here onClick="valid(this.form)">
</form>
</body>
</html>
In this example, when the user clicks the button "Click Here", the onClick event handler calls the function valid( ).
No comments:
Post a Comment