javascript events,Event Capturing

Javascript Events:

Events and event handlers are very important for JavaScript programming. Events are actions that occur usually as a result of something the user does. For example, clicking a button is an event, or moving the mouse over a link,resizing the page, submitting a form.

Javascript - Event handlers:
Event handlers are defined so that your script can react to an event. Each event handler specifies which JavaScript code to execute. Eg: You can define a function to be called when mouse moves over an image.
Event handlers are usually placed within the HTML tag which creates the object on which the event acts. The general syntax is

where 'tag' is an HTML tag and JavaScript Code is a sequence of JavaScript statements.

For example, a button is subject to a onClick event, meaning that its event handler will be triggered when the click the button. Therefore, you place the event handler for a button's click inside the A tag. The following code shows an easy example of the event-handler onClick:

<form>
<script>
function DisplayStatistics()
{
alert('Statistics');
}
</script>
<input type="button" value="Click " onClick="alert('Example1')">
<input type="button" value="Show Statistics" onClick="DisplayStatistics()">
</form>

When first button 'Click' is clicked, a alert message is executed. When second button 'Show Statistics' is clicked, a function 'DisplayStatistics' is called.

Another example:

<html>
<head>
<SCRIPT LANGUAGE="JavaScript">
<!-- hide

function Display() {
alert('Hello !');
}
// -->
</script>
</head>
<body>

Top

Javascript - Common events

Event Occurs when Applied to Event handler

Click User clicks form element or link

buttons, radio buttons, checkboxes, submit buttons, reset buttons, links onClick

Dbclick the user double click a link or form element area,link onDbclick

Focus
User gives input focus to window or form element

windows and all form elements onFocus

Blur
User removes input focus from window or form element windows and all form elements onBlur

Keydown
User depresses a key documents, images, links, text areas onKeyDown

Keyup
User releases a key documents, images, links, text areas onKeyUp

Dragdrop
User drops an object onto the browser window, such as dropping a file on the browser window windows onDragDrop

Mouseover
User moves cursor over a link
onMouseOver links onMouseOver

Mouseout
User moves cursor out of a client-side image map or link areas, links onMouseOut

Mousedown
User depresses a mouse button
documents, buttons, links
User depresses a mouse
onMouseDown

Mouseup User releases a mouse button documents, buttons, links onMouseUp

Mousemove
User moves the cursor nothing by default onMouseMove

Load
User loads the page in the Navigator

document body onLoad

Unload
User exits the page

document body onUnload

Submit
User submits a form forms onSubmit

Resize
User or script resizes a window windows onResize

Error
The loading of a document or image causes an error

images, windows onError

Select
User selects form element's input field text fields, textareas onSelect

Change
User changes value of element text fields, textareas, select lists onChange

Top

Javascript - Event Capturing

When someone clicks on a button, the onClick event handler of this button is being called. Sometimes you may want the window, document or layer object object to handle certain types of events instead of leaving them for the individual parts of the document.

The steps for setting up event capturing :

1) Set up the window to capture all Click events.

First we tell the window object to capture the Click event.The event capturing works a little bit differently between the browsers. So let us see each individually.

Event Capturing in Netscape:
We use the method captureEvent() for this. Use a statement such as the following:

window.captureEvents(Event.CLICK);

If you want to capture several events you'll have to separate them through a '|' .

Eg:
window.captureEvents(Event.CLICK | Event.MOVE);

Event Capturing in Internet Explorer:

Use a statement such as the following:
document.onclick = MyFunction();

2) Define a function that handles the event.

Next, define a function that handles the event. The argument 'e' is the event object for the event. In IE you don't need to pass the "e" value.

function MyFunction(e) {
alert('Test');
}

3) Define the function as the window's event handler for that event.

Finally, define the function as the window's event handler for that event: The line

window.onclick= MyFunction();

defines what happens when a Click event occurs. It tells the browser to call MyFunction() as a result of a Click event.

Eg:

<html>
<head>
<script language="JavaScript">
ns4x = (navigator.appName == "Netscape")
ie4x = (navigator.appName == "Microsoft Internet Explorer")

if(ns4x)window.captureEvents(Event.CLICK);
else if(ie4x)document.onclick = handle;

function EventHandler(e) {
alert("Captured your event!");
return true;
}
window.onclick= EventHandler;

</script>
</head>
<body>
<a href="home.htm">Click on this link</a>
</body>
</html>

Top

Javascript events - Examples

<html>
<head>
<script language="JavaScript">
<!--
ns4x = (document.layers)? true:false
ie4x = (document.all)? true:false

if(ns4x)window.captureEvents(Event.MOUSEMOVE);
if(ie4x)document.onmousemove=DisplayXY;
window.onmousemove= DisplayXY;

function DisplayXY(e) {
if(ns4x)message=("x: " + e.pageX + " y: " + e.pageY);
else
if(ie4x)message=("x: " + event.x+ " y: " + event.y);
status=message; //Display X and Y positions on status bar
}
// -->
</script>

Please look at the status bar

</html>
Top