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

Advertisements

About Vijay Modi

Having 12+ years of experience in web application development. Expertise in various domains like E-Commerce, E-Learning, Insurance. I have expertise in web application development, window application development, Performance improvement, bug fixing etc. I have worked on various Microsoft technologies including ASP.Net, MVC, WebApi, WCF, Entity Framework, WPF, Window Application Development, AWS, Azure, AngularJS 2.0 / 1.5.2, .NetCore framework, jQuery. I am believing in quality work and achieving deadlines. Also like to work on new technologies and quick learner.
This entry was posted in Uncategorized and tagged . Bookmark the permalink.

One Response to JavaScript Events

  1. Sarath Lal says:

    Hi Vijay,
    I am new in ASP.Net. How can I get Server Data in a javascript. I am waiting your reply soon.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s