Event : Event Object : Event JAVASCRIPT TUTORIALS

JAVASCRIPT TUTORIALS » Event » Event Object »



The Event object represents an event.

Properties of the Event Object is listed in the following table.

Property Description
data Array of URL's for dragged and dropped objects
height Height of window
layerX Horizontal cursor position within layer
layerY Vertical cursor position within layer
modifiers Bit mask representing modifier keys
pageX Horizontal cursor position within Web page
pageY Vertical cursor position within Web page
screenX Horizontal cursor position within computer screen
screenY Vertical cursor position within computer screen
target Object for captured events
type Type of event
which The mouse button that is pressed
width Width of window

In addition to the Event properties, events exist that get handled.

The available events are shown in the following Table.

Events Description
ABORT Loading of Web page interrupted by user.
BLUR Focus is removed from the object.
CHANGE Contents or setting for document object changed.
CLICK Mouse button is clicked once.
DBLCLICK Mouse button is clicked twice.
DRAGDROP Object is dragged and dropped.
ERROR Error occurred during loading.
FOCUS Focus is applied to an object.
KEYDOWN A key is pressed down.
KEYPRESS A key is pressed.
KEYUP A key is let up after being pressed down.
LOAD Load document within a browser.
MOUSEDOWN The mouse button is pressed down.
MOUSEMOVE The mouse cursor is moved.
MOUSEOUT The mouse cursor is moved away from a specific object.
MOUSEOVER The mouse cursor is moved over a specific object.
MOUSEUP The pressed mouse button is let up.
MOVE Object is moved on the screen.
RESET Reset button is pressed.
RESIZE Window or frame has been resized.
SELECT Document object is selected.
SUBMIT Submit button is pressed.
UNLOAD Document is unloaded from browser.

    <title>Using the event object</title>
    <script language = "Javascript">

    window.captureEvents(Event.KEYPRESS | Event.DBLCLICK);


    function handlePress(evnt){
       alert("You pressed a key down. The event type: " + evnt.type);
       return true;

    function handleDblClick(evnt){
       alert("You double clicked at location: " + evnt.pageX + "," + evnt.pageY);
    function handleSubmit(evnt){
       alert("You clicked on the submit button");
    window.onkeypress = handlePress;

    window.ondblclick = handleDblClick;

    document.onsubmit = handleSubmit;

    When you click on the submit button, it triggers the <b>SUBMIT</b>
    event which displays an alert box.

    If you double click somewhere in the page, it triggers the
    <b>DBLCLICK</b> event.
    When a key is pressed down in the browser, the <b>KEYPRESS</b>
    event is triggered.
    <input type="submit" value="Submit" onSubmit=''>

HTML code for linking to this page:

Follow Navioo On Twitter


 Navioo Event
» Event Object