The event of an HTML page DOM object

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 ()