Javascript Events:

Event handlers Common Events Event capturing Examples

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

<tag onEventName=”JavaScript Code”>

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>

<form name=”TestForm”>
<input type=”button” value=”Say Hello!”  onClick=”Display()”>

</form>

</body>

</html>

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


 

 

Leave a Comment