JavaScript Event object attributes and Methods

Event attributes and methods:

1. Type: event type, such as click in onlick;
2. SrcElement/target: the event source, which is the element of the event;
3. Button: Declares the mouse key to be pressed. An integer. 1 indicates the left button, 2 indicates the right button, and 4 indicates the middle button. If you press multiple keys, add these values to the wine, so 3 indicates that both the left and right keys are pressed. (In firefox, 0 indicates the left button, 1 indicates the middle key, and 2 indicates the right button)
4. ClientX/clientY: when an event occurs, the cursor is relative to the position in the upper left corner of the visible document area in the browser window. (In DOM standard, neither of these two attribute values takes into account the scrolling of the document. That is to say, no matter where the document is rolled, as long as the event occurs in the upper-left corner of the window, clientX and clientY are both 0. Therefore, in IE, to get the coordinates of the event relative to the position at the beginning of the document, add document. body. scrollLeft and document. body. scrollTop)
5. OffsetX, offsetY/layerX, layerY: when an event occurs, the cursor is relative to the position in the upper left corner of the source element;
6. X, y/pageX, pageY: returns an integer relative to the horizontal coordinate of the cursor of the parent element;
7. AltKey, ctrlKey, and shiftKey: return a Boolean value;
8. KeyCode: return the code of the key when the keydown event occurs, and the Unicode Character of the keypress event; (firefox2 does not support event. keycode, which can be replaced by event. which)
9. FromElement, toElement: The former refers to the document elements that move the mouse over the mouseover event, and the latter refers to the document elements that move the mouse over the mouseout event;
10. CancelBubble: A boolean attribute. When it is set to true, the Stop event is further blister to the element of the inclusion level; (e. cancelBubble = true; equivalent to e. stopPropagation ();)
11. ReturnValue: A boolean attribute. When set to false, the browser can be organized to execute the default event action. (e. returnValue = false; equivalent to e. preventDefault ();)
12. AttachEvent (), detachEvent ()/addEventListener (), removeEventListener: The method for registering multiple event handler functions for DOM object event types. They have two parameters. The first one is the event type, the second is the event processing function. When the attachEvent () event is executed, this keyword points to the window object rather than the element where the event occurs;
13. ScreenX and screenY: the position of the mouse pointer relative to the upper left corner of the monitor. If you want to open a new window, these two attributes are very important;

Notes:

1. Event indicates the event status, such as the element that triggers the event object, the location and status of the mouse, and the key that is pressed;
2. The event object is valid only when an event occurs.

The event in firefox is different from that in IE. The global variables in IE are available at any time. In firefox, parameter guidance is used, and temporary variables are used at runtime. Both can be used in IE/get and Opera.

3. The following two statements have the same effect:

Var evt = (evt )? Evt: (window. event )? Window. event: null); var evt = evt | window. event; // in firefox, window. event is null, and in IE, event is null.

4. Blister of events in IE

In IE, events can bubble up to the upper level along the inclusion level. That is to say, the lower level DOM node defines the event processing function. If there is an event processing function of the same event type as the lower level node, the upper-layer event processing function will also be executed. For example, the div tag contains a. If both labels have The onclick event processing function, The onclick event processing function of tag a is executed first, then execute the div event processing function. If you do not want to execute the onclick event processing function of the upper div after the expected event processing function is executed, set cancelBubble to true.