Left Quote    Copy from one, it's plagiarism; copy from two, it's research.
- Wilson Mizner    
Right Quote
[login] | [Register]

Learning JavaScript Basics

by: bs0d
Page: 9 of 10
(View All)


First, events are bits of code that link an action by a user, to an action performed by the computer. The action can be a mouse action or key press on the keyboard, or even loading / unloading a webpage.

There a numerous events that can be used within your Web Page, it's just where you would use them varies from place to place. Below are the different categories of events you will use:

  1. Keyboard Events
  2. Mouse Events
  3. Selection Events
  4. Misc./Other Events

Now we will go a bit more in depth of each category, describe them and also provide a list of some of the most commonly used events.

Mouse Events

Whenever a user performs actions with the mouse, these are the events that will detect the specific actions, and then you can act accordingly.
  • onclick - When the left mouse button has been clicked once.
  • ondblclick - Detects when the left mouse button has been clicked twice very quickly.
  • onmousedown - Detects when the mouse button has been held down.
  • onmouseup - Will detect when the mouse button has been released.
  • onmouseover - When the mouse cursor moves over the top of an element.
  • onmouseout - Will detect when the mouse cursor has moved off an element.

Here is a simple example using one of the events above that should give you an idea of how you can use these in your JavaScript programs.

What occurs in the form above is that when you press the button (Press Me) once, the text box to the left (text1) will indicate you pressed the mouse button. And when you double-click the button, it will indicate the double-click.

Selection Events

These events detect when focus has been given to a certain control on a form.
  • onselect - Will detect when an element has been selected.
  • onfocus - Signals when an element has been given focus.
  • onblur - Signals when an element has lost focus.

Check out this code sample below. You can use it as a guide to give you an idea of how to work with these events.

Miscellaneous Events

Here are a few common events used with JavaScript, but they do not necessarily fit in the outlined categories above.
  • onchange - This will detect when data (within a form element) has been changed.
  • onload - Detects when your webpage has finished loading.
  • onunload - Signals when a webpage has been unloaded (when someone leaves the page).
  • onabort - Will detect when the loading process of a webpage is canceled.
  • alert - this is sort of like "window.prompt" but only used to notify a user when an event has occurred, and only the Ok button is displayed. (Can be displayed as alert(); or window.alert();)

Take a look at this code sample and see a few of the Miscellaneous Events in action.

This works the same with "onabort", "onunload" and so on.

Window Objects

In addition to the Misc., Keyboard, mouse and selection events, there are some window objects you can use to perform specific tasks. Below is a list of a few commonly used window objects you can use within your programs to make them more efficient and user friendly.

  • window.print - Will print the page you see on the screen.
  • - Can open a new window, you can set the properties as well.
  • window.close - Will close the current window.
  • window.status - This can display a message in the status bar of your window.

Check out the code below and you can get an idea of using these objects in your programs.

Take a look at the "open" button. You can open files or even urls. You can set the properties, they go like this:'file or url', 'open it within the current window','set toolbar to yes or no, status bar yes or no, height and then width').

1  |  2  |  3  |  4  |  5  |  6  |  7  |  8  |  9  |  10  |  
Next »

No Comments for this page.

You Must be logged in or a member to comment.

Tutorial Stats

Tutorial Stats

3 Total Comments
4.66 Rating of 5 (3 Votes)


Tutorial Options

· Login to Rate This Article
· Login to Post a Comment
· Read more by this author
Digg This Article! Bookmark This Article Reddit: Bookmark This Article BlinkList: Blink This Article! YahooMyWeb BlogMarks: Add This Mark! Furl: Save This Article Spurl: Mark This Article



· Getting Started with Ajax
Your Article Here

"" Copyright © 2002-2020; All rights lefted, all lefts righted.
Privacy Policy