JavaScript Events

Hi Friends,

I am here giving some Events regarding buttons in JavaScript.

onClick

We've already used this event quite a lot. But you can use it with buttons, images, links, radio buttons, check boxes. Here's a simple onClick event used with an image:

<IMG SRC = red.jpg onClick = "alert('No stealing the images!')">

onDblClick

Same as above, really. Try inserting Dbl into onClick and see what happens.

onKeyDown

This events fires when a key on your keyboard is pressed. It applies to buttons, textboxes, text areas, and links. If you had a search box on a form, for example, you might want to activate the search when the user presses the Return/Enter key on the keyboard. For Netscape users, though, you need to use this:

window.captureEvents(Event.KEYPRESS)

And that's only the start of your problems!

An easier example of the KeyDown event that works in both browsers is this:

<INPUT type = text onKeyDown = "alert('Key pressed')">

onMouseOver

You've seen this in action already when we wrote the script for the "dancing hand". Associated events are onMouseOut and onMouseDown. They are mainly used for links and images. A typical use of onMouseOver is to swap images around when creating a rollover effect.

Onblur

This event takes places when objects lose focus. If you click inside one text box then click outside it the textbox has lost focus. That's when the onBlur event fires.

<INPUT TYPE = text onBlur = "alert('Lost focus')">

Here's an example. Click inside the first text box, then click inside the second one.

When you move away from the textbox, you should see the alert box. You can write code to check if something like an email address is correct. If not, you can reset the text box to a blank string.

onSubmit

This is a very useful event that can be used for data validation on a form. You can use this event with a Submit button. The details on the form can then be checked for errors. If you catch any errors, you can then stop the form's details from being submitted. Here's an example. Note the use of the word return. This is set to a Boolean value. If return is false then the form doesn't get submitted; if it's true then the form is submitted. (More about return in the next section.)

<FORM name = f1 onSubmit = "return Validate()">


<INPUT Type = Submit Value = " Send ">


</FORM>

The form is not much good because it only has a submit button. But notice where the onSubmit event is - in the FORM tag, and not with the Submit button.

Here's the Validate() function. It doesn't do any checking. All it does is to display an alert message.

function Validate() {

Details = false


if (Details == false) {


alert("errors detected")


return false


}

if (Details == true) {


alert("Form Submitted")


return true


}


}

In the function, we've set a variable (Details) to false. This is just for testing purposes, and means the user has filled out the form incorrectly. Look at the two return values, though. If the Details are false then return gets set to false, and the form isn't submitted; if the Details are true then return is true, and the form is submitted.

If you want, add a Method and an Action to your Form. Like this one:

<form name = f1 onSubmit = "return Validate()"


Method = post Action="Mailto:MyEmailAddress@MyISP.com" Enctype="text/plain">

(The Enctype will send the details in plain text that's much easier to read.)

Test out the code on a web page. Change the Details variable to true and click the button. We're going to do some real error checking in the next section, and we'll meet onSubmit again.

Speaking of that next section - let's get right to it.

Reference: http://homepage.ntlworld.com/kayseycarvey/jss3p3.html


Regards,


Vijay Modi