JavaScript Events, JavaScript Tutorial, Global Guide Line Technology.
Bookmark Bookmark: JavaScript Events, JavaScript Tutorial Forum | Blog |

      Home                    

Basic JavaScript Guide.
 JScript Introduction.            
 JScript Why?                       
 JScript Recognitions.          
 JScript onMouseover.         
 JScript with Buttons.           
 JScript Alerts.                     
 JScript Variables.               
 JScript Operators.               
 JScript Functions.               
 JScript Prompts.                 
 JScript Conditions.             
 JScript Validations.            
 JScript Confirmation Boxes.
 JScript Browser Detection.  
 JScript Redirection.            
 JScript on Links.                 
 JScript Switch.                    
 JScript Loops.                     
 JScript Events. 
 JScript Exception Handling.
 JScript Reserve Characters. 
 JScript with Objects.            
 JScript Math Object.           
 JScript using Dates.             
 JScript using String.            
 JScript using Arrays.            
 JScript Operations.              
 JScript Handling Cookies.   
 JScript in Mapping.             
 JScript Time Out.                
 JScript Summary.                

JavaScript Tutorial >> JavaScript Events.


     Back             Next     


What is JavaScript Event?

Now JavaScript Tutorial will guide us that JavaScript event is something that happens, e.g. a mouse click on a button, an image that has loaded. JavaScript Events usually occur as a result of human interaction with the browser, and what action performed by the visitors that will be handle or capture by the JavaScript Events, e.g. selecting a document to load, validating form information, mouse activities and so many events.

Event Handlers in JavaScript

Event handlers are JavaScript methods, i.e. functions of objects, that allow us as JavaScript programmers to control what happens when events occur.

For example, the following form has an onSubmit JavaScript Event handler that displays an alert message when the submit button will be click.

Syntax for JavaScript Event handler

<FORM NAME="formName"
onSubmit="alert('Form submitted successfully, and handled by JavaScript Event Handler')">

<INPUT TYPE="SUBMIT">
</FORM>

The onSubmit JavaScript Event handler can be invoked in two instances, by the user pressing the submit button, or by another JavaScript submitting the form, e.g.

document.formName.submit();

Complete list of Event Handlers in JavaScript

► onAbort - The user aborts the loading of an image
► onBlur - HTML  form element loses focus or when a window or frame loses focus.
► onChange - select, text, or textarea field loses focus and its value has been modified.
► onClick - object on a form is clicked can be capture by this event handler.
► onDblClick - user double-clicks a form element or a link event handler.
► onDragDrop - user drops an object e.g. file onto the browser window.
► onError - loading of a document or image causes an error event handler.
► onFocus - window, frame, frameset or form element receives focus.
► onKeyDown - user depresses a key event handler.
► onKeyPress - user presses or holds down a key event handler.
► onKeyUp - user releases a key event handler.
► onLoad - browser finishes loading a window or all of the frames within a frameset.
► onMouseDown - user depresses a mouse button event handler.
► onMouseMove - user moves the cursor event handler.
► onMouseOut - cursor leaves an area or link by mouse movement event handler.
► onMouseOver - cursor moves over an object or area event handler.
► onMouseUp - user releases a mouse button event handler.
► onMove - user or JavaScript moves a window or frame event handler.
► onReset - user resets a form event handler.
► onResize - user or JavaScript resizes a window or frame.
► onSelect - user selects some of the text within a text or textarea field.
► onSubmit - user submits a form event handler.
► onUnload - user exits a document event handler.

JavaScript 1.0 Event Handlers List.

JavaScript 1.0 is supported by Netscape Navigator 2.0 browser and partially by Microsoft Internet Explorer 3.0 web browser, details of event handler in JavaScript 1.0 is as under with object name end event handler name.
 
Object Name in JavaScript 1.0 Event Handlers Names in JavaScript 1.0
button onBlur()1, onClick(), onFocus()1
checkbox onBlur()1, onClick(), onFocus()1
fileupload onBlur(), onChange()2, onFocus()
form onSubmit()
link onClick(), onMouseOver()
password onBlur(), onChange()3, onFocus()
radio onBlur()1, onClick(), onFocus()1
reset onBlur()1, onClick()4, onFocus()1
select onBlur()1, onChange()5, onFocus()1
submit onBlur()1, onClick()6, onFocus()1
text onBlur(), onChange(), onFocus()
textarea onBlur(), onChange(), onFocus()
window onLoad(), onUnload()

1 In Navigator 2.0 for Unix platforms only, the onBlur() and onFocus() JavaScript event handlers are only invoked for the text entry elements: text, textarea, password and fileupload objects.
2 In Navigator 2.0 the fileupload input is hidden from JavaScript, so onChange() is limited.
3 In Navigator 2.0 the password input is hidden from JavaScript, so onChange() is limited.
4 In Navigator 2.0 the reset onClick() JavaScript event handler cannot cancel the form being reset.
5 In Navigator 2.0 for Windows platforms, the onChange() JavaScript event handler is not invoked immediately after a select option is chosen in an HTML Form.
6 In Navigator 2.0 the submit onClick() JavaScript event handler cannot cancel the form submission.

JavaScript 1.1 Event Handlers List.

JavaScript 1.1 is supported by Netscape Navigator 3.0 browser and partially by Microsoft Internet Explorer 3.0 web browser, details of JavaScript 1.1 Events Handler are as under.
 
Object Names in JavaScript 1.1 Event Handlers Names in JavaScript 1.1
area onClick()2, onMouseOut(), onMouseOver()
button onBlur()1, onClick(), onFocus()1
checkbox onBlur()1, onClick(), onFocus()1
fileupload onBlur(), onChange(), onFocus()
form onReset(), onSubmit()
frame onLoad(), onUnload()
image3 onAbort()3, onError()3, onLoad()3
link onClick()2, onMouseOut(), onMouseOver()
password onBlur(), onChange(), onFocus()
radio onBlur()1, onClick(), onFocus()1
reset onBlur()1, onClick(), onFocus()1
select onBlur()1, onChange(), onFocus()1
submit onBlur()1, onClick(), onFocus()1
text onBlur(), onChange(), onFocus()
textarea onBlur(), onChange(), onFocus()
window onBlur()4, onError()4, onFocus()4, onLoad(), onUnload()

1 In Navigator 3.0 for Unix platforms, the onBlur() and onFocus() JavaScript event handlers are only invoked for the text entry elements: text, textarea, password and fileupload objects.
2 In Navigator 3.0 for Windows platforms, the onClick() JavaScript event handler is not supported by the area object.
3 In Explorer 3.0 the image object is not supported.
4 In Explorer 3.0 the window objects onBlur(), onError() and onFocus() JavaScript event handlers are not supported.

JavaScript 1.2 Event Handlers List.

JavaScript 1.2 is supported by Netscape Navigator 4.0 web browser. Although Microsoft Internet Explorer browser appears to support JavaScript 1.2, it actually implements a different Dynamic Object Model which will not be described here.
 
Object Names in JavaScript 1.2 Event Handlers Names in JavaScript 1.2
area onDblClick(), onMouseOut(), onMouseOver()
button onBlur(), onClick(), onFocus(), onMousedown(), onMouseup()
checkbox onBlur(), onClick(), onFocus()
document onClick(), onDblClick(), onKeyDown(), onKeyPress(), onKeyUp(), onMouseDown(), onMouseUp()
fileupload onBlur(), onChange(), onFocus()
form onReset(), onSubmit()
frame onBlur(), onDragDrop(), onError(), onFocus(), onLoad(), onMove(), onResize(), onUnload()
image onAbort(), onError(), onKeyDown(), onKeyPress(), onKeyUp(), onLoad()
layer onMouseOver(), onMouseOut(), onLoad(), onFocus(), onBlur()
link onClick(), onDblClick(), onKeyDown(), onKeyPress(), onKeyUp(), onMouseDown(), onMouseOut(), onMouseUp(), onMouseOver()
password onBlur(), onFocus()
radio onBlur(), onClick(), onFocus()
reset onBlur(), onClick(), onFocus()
select onBlur(), onChange(), onFocus()
submit onBlur(), onClick(), onFocus()
text onBlur(), onChange(), onFocus(), onSelect()
textarea onBlur(), onChange(), onFocus(), onKeyDown(), onKeyPress(), onKeyUp(), onSelect()
window onBlur(), onDragDrop(), onError(), onFocus(), onLoad(), onMove(), onResize() onUnload()

     Back             Next     
 

JavaScript Event Object Examples



[ About ] [ Contact ] [ Home ]
[ Links ] [ Site Map ] [ Services ] [ Privacy ]

Copyright 2005 -  2018 www.globalguideline.com All rights reserved. (Best viewed in IE 6.0+ or Firefox 2.0+ at 1024 * 768 or higher) 210 visitors are online now