Home Library Learn Downloads Support Community
Sign in | United States - English | |
36 out of 72 rated this helpful - Rate this topic

event object

[This documentation is preliminary and is subject to change.]

Represents the state of an event, such as the element in which the event occurred, the state of the keyboard keys, the location of the mouse, and the state of the mouse buttons.

Document Object Model (DOM) Level 2 HTML Specification, Section 1.6.5

Standards information

Remarks

The event object is available only during an event—that is, you can use it in event handlers but not in other code.

Although all event properties are available to all event objects, some properties might not have meaningful values during some events. For example, the fromElement and toElement properties are meaningful only when processing the onmouseover and onmouseout events.

In Microsoft Visual Basic Scripting Edition (VBScript), you must access the event object through the window object.

Several of the properties that apply to this object are not writable unless this object has been created using the createEventObject method. The following is a list of these properties: altKey, altLeft, button, clientX, clientY, ctrlKey, ctrlLeft, dataFld, offsetX, offsetY, propertyName, qualifier, reason, repeat, screenX, screenY, shiftKey, shiftLeft, srcUrn, type, x, and y.

Examples

This example uses the event object to check whether the user clicked the mouse within a link, and to prevent the link from being navigated if the SHIFT key is down. It also display mouse position within the <body> element:

Copy 

<!DOCTYPE html>
<html>

<head>
  <meta content="text/html; charset=utf-8" http-equiv="Content-Type">
  <title>Cancels Links</title>
  <style>
    body {
      border: 1px black solid;
      width: 32em;
      padding: 0 1em;
    }
  </style>
</head>

<body id="bodyTag">
  <p>Mouse over this black box (i.e., the &lt;body&gt; element) to see mouse 
  position.
  <p>And click <a href="http://www.bing.com" target="_blank">this</a> link with and without holding the SHIFT key down.</p>
  <p id="mousePositionDisplay">Mouse position:</p>
  <script>
    var bodyElement = document.getElementById('bodyTag');
    bodyElement.addEventListener('click', cancelLink, 'false');
    bodyElement.addEventListener('mousemove', reportMousePosition, 'false');
     
    function cancelLink() {
      if (window.event.srcElement.tagName == "A" && window.event.shiftKey) {
        window.event.returnValue = false;
      }
    }
    
    function reportMousePosition() {
      document.getElementById('mousePositionDisplay').innerHTML = "Mouse position: (" + window.event.x + ", " + window.event.y + ")";
    }
  </script>
</body>

</html>

 

 

Build date: 3/14/2012

Did you find this helpful?
(1500 characters remaining)
Community Content Add
Annotations FAQ
Event object seems to be destroyed with var declaration.
The following declaration at the window level on IE:

var event;

will destroy the event object as used here:

<div onMouseOver = "alert(event.type);">Mouseover Div</div>

Error: 'event.type' is null or not an object

I realize that declaring a variable with the name "event" is bad code but this does not occur in other browsers.

Update: I have been made aware that this is a problem of how the event object is handled in the DOM. That in other browsers

the mouseover code is effectively

function(event){
    alert(event.type);
}

and theeventparameter overrides anyeventdeclared in a containing scope, whereas in IE, it's

function(){
    alert(event.type);
}
History
Remark - readonly
The event object is not writable, though many properties are ... which in case of popups, must be switched to the popup-event object.
History
suggestion - add existing properties

Suggestion: Include event properties: event.menu, that contextmenu can be used in keyed position, eg. for Cursoring down a popup menu (in lieu of mouse) ... event.Windows....

Ray.

History
unclear - extent - event effect

The following is-not a method for invoking Ctrl-F-find-on-page via JScript:

eg.

var eventSubj=document.createEventObject();
eventSubj.ctrlKey=true;
eventSubj.keyCode=70;
elementId.fireEvent('onkeydown',eventSubj);




// likewise 'onkeypress'; keyCode=6; which appears to be too late to invoke Ctrl-F-find-on-page.
History
How can I pass javascript objects to client-side code?

Well, I know the mechanics of passing it, but it presents itself as a System.__ComObject.

If I am passing the event object, how could i access the properties of this object?

History