HTML DOM Event Object instance
Which mouse button is clicked?
What is the coordinates of the cursor?
What is the Unicode of the pressed keys?
Relative to the screen, what is the cursor coordinates?
Is the SHIFT key pressed?
Which element has been clicked?
Which event type has occurred?
Event Object
The event object represents the state of the incident, such as the element in which the event occurred, the state of the keyboard key, the position of the mouse, and the state of the mouse button.
Events are often used in conjunction with functions, and functions are not executed until the event occurs!
Event handle (handlers)
One of the new features of HTML 4.0 is the ability to enable HTML events to trigger behavior in the browser, such as starting a piece of JavaScript when the user clicks on an HTML element. The following is a list of attributes that can be inserted into an HTML tag to define the behavior of the event.
Properties |
When this event occurred | ...
Onabort |
The loading of the image is interrupted. |
Onblur |
Element loses focus. |
OnChange |
The contents of the domain are changed. |
OnClick |
The event handle that is invoked when the user taps an object. |
OnDblClick |
The event handle that is invoked when the user double-clicks an object. |
OnError |
An error occurred while loading the document or image. |
onfocus |
Element gets the focus. |
OnKeyDown |
One of the keyboard keys is pressed. |
onkeypress |
One of the keyboard keys is pressed and released. |
OnKeyUp |
A keyboard key is released. |
OnLoad |
A page or an image to finish loading. |
OnMouseDown |
The mouse button is pressed. |
OnMouseMove |
The mouse is moved. |
onmouseout |
The mouse moves away from an element. |
onmouseover |
Move the mouse over an element. |
OnMouseUp |
The mouse button is loosened. |
OnReset |
The reset button is clicked. |
OnResize |
The window or frame is resized. |
Onselect |
Text is selected. |
OnSubmit |
Confirm that the button is clicked. |
OnUnload |
The user exits the page. |
Mouse/Keyboard Properties
Properties |
Description |
Altkey |
Returns whether "ALT" is pressed when the event is triggered. |
button |
Returns which mouse button is clicked when the event is triggered. |
ClientX |
Returns the horizontal coordinates of the mouse pointer when the event is triggered. |
ClientY |
Returns the vertical coordinate of the mouse pointer when the event is triggered. |
Ctrlkey |
Returns whether the "CTRL" key is pressed when the event is triggered. |
Metakey |
Returns whether the "meta" key is pressed when the event is triggered. |
Relatedtarget |
Returns the node associated with the target node of the event. |
ScreenX |
Returns the horizontal coordinates of the mouse pointer when an event is triggered. |
ScreenY |
Returns the vertical coordinate of the mouse pointer when an event is triggered. |
Shiftkey |
Returns whether the "SHIFT" key is pressed when the event is triggered. |
IE Properties
In addition to the mouse/event properties above, Internet Explorer also supports the following properties:
Properties |
Description |
Cancelbubble |
This property must be set to TRUE if the event handle wants to prevent the event from propagating to the containment object. |
Fromelement |
For mouseover and Mouseout events, fromelement references the element that is moved out of the mouse. |
KeyCode |
For the KeyPress event, this property declares the Unicode character code generated by the key being struck. For the KeyDown and KeyUp events, it specifies the virtual keyboard code of the key being tapped. The virtual keyboard code may be related to the layout of the keyboard you are using. |
Offsetx,offsety |
The x-coordinate and y-coordinate of the location of the event that occurred in the coordinate system of the event source element. |
ReturnValue |
If this property is set, its value is higher than the return value of the event handle. By setting this property to Fasle, you can cancel the default action of the source element where the event occurred. |
Srcelement |
A reference to the Window object, Document object, or Element object that generated the event. |
Toelement |
For mouseover and Mouseout events, this property refers to the element that is moved into the mouse. |
X, y |
The X-and y-coordinates of the location where the event occurred, relative to the most inner containment element that is dynamically positioned with CSS. |
Standard Event Property
The properties defined by the Level 2 DOM event standard are listed below.
Properties |
Description |
Bubbles |
Returns a Boolean value that indicates whether the event is a bubbling event type. |
Cancelable |
Returns a Boolean value that indicates whether the event can hold a default action that can be canceled. |
Currenttarget |
Returns the element whose event listener triggered the event. |
Eventphase |
Returns the current stage of event propagation. |
Target |
Returns the element that triggered this event (the target node of the event). |
TimeStamp |
Returns the date and time the event was generated. |
Type |
Returns the name of the event represented by the current event object. |
Standard Event method
The following is a list of the methods defined by the Level 2 DOM event standard. The event model of IE does not support these methods:
method |
description |
Initev ENT () |
initializes the properties of the newly created Event object. |
preventdefault () |
notifies the browser not to perform the default action associated with the event. |
stoppropagation () |
|