Location via proxy:   [ UP ]  
[Report a bug]   [Manage cookies]                
Scribd
Upload
200 views

JavaScript Event Handlers

Events allow JavaScript code to react to user interactions and page changes. There are two types of event handlers - interactive handlers which respond to user actions like clicks, and non-interactive handlers which automatically run code like on page load. Common event handlers include onClick, onLoad, onChange, onSubmit and onMouseOver.

Uploaded by

Meenakshi Vaylure Paul
Copyright
© © All Rights Reserved
Available Formats
Download as PPT, PDF, TXT or read online on Scribd
200 views

JavaScript Event Handlers

Events allow JavaScript code to react to user interactions and page changes. There are two types of event handlers - interactive handlers which respond to user actions like clicks, and non-interactive handlers which automatically run code like on page load. Common event handlers include onClick, onLoad, onChange, onSubmit and onMouseOver.

Uploaded by

Meenakshi Vaylure Paul
Copyright
© © All Rights Reserved
Available Formats
Download as PPT, PDF, TXT or read online on Scribd
You are on page 1/ 13

What are events?

Events allow you to write JavaScript code that reacts


to certain situations. Examples of events include:

The user clicking the mouse button

The Web page loading

A form field being changed


Event handlers
An Event Handler executes a segment of a code based
on certain events occurring within the application,
such as onLoad, onClick.

JavaScript Event Handlers can be divided into two


parts:
 interactive Event Handlers

 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


Handler because it depends on the users action with the
mouse.

Non-interactive Event Handler would be onLoad,


because this Event Handler would automatically execute
JavaScript code without the user's interactivity.
EVENT HANDLER USED WITH
onAbort image
onBlur select, text, text area
onChange select, text, textarea

onClick button, checkbox, radio, link, reset, submit, area

onError Image, window


onFocus select, text, textarea
onLoad windows, image
onMouseOut link, area
onMouseOver link, area
onSelect text, textarea
onSubmit form
onUnload window
onChange:
The onChange Event Handler executes JavaScript code when
input focus exits the field after the user modifies its text.
Example:
<HTML>
<HEAD>
<TITLE>Example of onChange 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>
onClick:
<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>
-onLoad
<HTML>
<HEAD>
<TITLE>Example of onLoad Event Handler</TITLE>
<SCRIPT>
function hello() {
    alert("Hello there...\n\nThis is an example of onLoad.");
}
</SCRIPT>
</HEAD>
<BODY onLoad="hello()">
<H3>Example of onLoad Event Handler</H3>
</BODY>
</HTML>
onUnload:
An onUnload Event Handler calls JavaScript code when a
document is exited.

Example:
<HTML>
<HEAD><TITLE>onUnLoad Example</TITLE>
<SCRIPT>
function goodbye() {
        alert("Thanks for Visiting!");
}
</SCRIPT>
</HEAD>
<BODY onUnLoad="goodbye();">
<H3>Example of onUnload Event Handler</H3>
Look what happens when you try to leave this page...
</BODY>
</HTML>
onSubmit
 An onSubmit Event Handler calls JavaScript code when the form is
submitted.

Example:
<HTML>
<HEAD><TITLE> Example of onSubmit Event Handler </TITLE></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" VALUE="Submit this form">
</FORM>
</BODY>
<HTML>
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 framesets the Event Handler executes


JavaScript code when the window loses focus.

In windows you need to specify the Event Handler in the


<BODY> attribute.

For example:
 <BODY BGCOLOR='#ffffff'
onBlur="document.bgcolor='#000000'">

Note: On a Windows platform, the onBlur event does not work


with <FRAMESET>.
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>
OnMouseover and
onmouseout
<html>
<head>
<script type="text/javascript">
function over() {
alert("Mouse Over");
}
function out() {
alert("Mouse Out");
}
</script>
</head>
<body>
<p>Bring your mouse inside the division to see the result:</p>
<div onmouseover="over()" onmouseout="out()">
<h2> This is inside the division </h2>
</div>
</body>
</html>

You might also like