Html dom Event object

Html dom Event object instance

Which mouse button is clicked?

What is the coordinate of the cursor?

What is the unicode of the pressed key?

What is the coordinate of the cursor relative to the screen?

Is the shift key pressed?

Which element is clicked?

Which event type has occurred?

Event object

The Event object represents the Event status, such as the elements in the Event, the status of the keyboard buttons, the location of the mouse, and the status of the mouse button.

Events are usually used in combination with functions. functions are not executed before an event occurs!

IE:Internet Explorer,F:Firefox,O:Opera,W3C:World Wide Web Consortium (Internet standard ).

Event Handlers)

One of the new features of HTML 4.0 is the ability to trigger HTML events in browsers. For example, when a user clicks an HTML element, a JavaScript code is started. The following is an attribute list that can be inserted with HTML tags to define event behavior.

Attribute	When this event occurs...	IE	F	O	W3C
Onabort	Image loading is interrupted.	4	1	9	Yes
Onblur	Element loses focus.	3	1	9	Yes
Onchange	The domain content is changed.	3	1	9	Yes
Onclick	Event handle called when a user clicks an object.	3	1	9	Yes
Ondblclick	The event handle that is called when you double-click an object.	4	1	9	Yes
Onerror	An error occurred while loading the document or image.	4	1	9	Yes
Onfocus	Element to obtain the focus.	3	1	9	Yes
Onkeydown	A keyboard button is pressed.	3	1	No	Yes
Onkeypress	A keyboard button is pressed and released.	3	1	9	Yes
Onkeyup	A keyboard button is released.	3	1	9	Yes
Onload	A page or image is loaded.	3	1	9	Yes
Onmousedown	The mouse button is pressed.	4	1	9	Yes
Onmousemove	The mouse is moved.	3	1	9	Yes
Onmouseout	Move the mouse away from an element.	4	1	9	Yes
Onmouseover	Move the cursor over an element.	3	1	9	Yes
Onmouseup	The mouse button is released.	4	1	9	Yes
Onreset	The reset button is clicked.	4	1	9	Yes
Onresize	The window or frame is adjusted again.	4	1	9	Yes
Onselect	The text is selected.	3	1	9	Yes
Onsubmit	The confirmation button is clicked.	3	1	9	Yes
Onunload	The user exits the page.	3	1	9	Yes

Mouse/keyboard Properties

Attribute	Description	IE	F	O	W3C
AltKey	Returns whether or not "ALT" is pressed when the event is triggered.	6	1	9	Yes
Button	Returns the mouse button that is clicked when an event is triggered.	6	1	9	Yes
ClientX	Returns the horizontal coordinates of the mouse pointer when an event is triggered.	6	1	9	Yes
ClientY	Returns the vertical coordinates of the mouse pointer when an event is triggered.	6	1	9	Yes
CtrlKey	Returns whether the "CTRL" Key is pressed when the event is triggered.	6	1	9	Yes
MetaKey	Returns whether the "meta" Key is pressed when the event is triggered.	No	1	9	Yes
RelatedTarget	Return the node associated with the target node of the event.	No	1	9	Yes
ScreenX	Returns the horizontal coordinates of the mouse pointer when an event is triggered.	6	1	9	Yes
ScreenY	Returns the vertical coordinates of the mouse pointer when an event is triggered.	6	1	9	Yes
ShiftKey	Returns whether the "SHIFT" Key is pressed when the event is triggered.	6	1	9	Yes

IE attributes

In addition to the above mouse/event attributes, the IE browser also supports the following attributes:

Attribute	Description
CancelBubble	If the event handle wants to prevent the event from spreading to an inclusive object, you must set this attribute to true.
FromElement	For mouseover and mouseout events, fromElement references the elements that move the mouse away.
KeyCode	For keypress events, this attribute declares the Unicode escape code generated by the hitting key. For keydown and keyup events, it specifies the virtual keyboard code of the key to be knocked. The virtual keyboard code may be related to the layout of the used keyboard.
OffsetX, offsetY	The x and y coordinates of the event occurrence location in the coordinate system of the event source element.
ReturnValue	If this attribute is set, its value has a higher priority than the return value of the event handle. Set this attribute to fasle to cancel the default action of the event source element.
SrcElement	References to the Window object, Document object, or Element object that generates the event.
ToElement	For mouseover and mouseout events, this attribute references the elements that move into the mouse.
X, y	The x and y coordinates of the event location, which are relative to the inmost element dynamically located with CSS.

Standard Event attributes

The attributes defined by Level 2 DOM events are listed below.

Attribute	Description	IE	F	O	W3C
Bubbles	Returns a Boolean value indicating whether the event is a bubble event type.	No	1	9	Yes
Cancelable	Returns a Boolean value indicating whether the event can be canceled by default.	No	1	9	Yes
CurrentTarget	Returns the event listener element that triggers the event.	No	1	9	Yes
EventPhase	Returns the current stage of event propagation.				Yes
Target	Returns the element that triggers the event (the target node of the event ).	No	1	9	Yes
TimeStamp	Returns the date and time of event generation.	No	1	9	Yes
Type	Returns the name of the Event represented by the current Event object.	6	1	9	Yes

Standard Event Method

The following describes the standard definition of level 2 DOM events. The event model of IE does not support these methods:

Method	Description	IE	F	O	W3C
InitEvent ()	Initialize the attributes of the newly created Event object.	No	1	9	Yes
PreventDefault ()	Notify the browser not to perform the default action associated with the event.	No	1	9	Yes
StopPropagation ()	The termination event is further disseminated in the capture, target processing, or blister phase of the propagation process. After this method is called, the handler for processing the event on the node will be called, and the event will not be assigned to other nodes.	No	1	9	Yes

  Added:   Event. srcElement application:Event. srcElement. tagName can capture the activity tag name.
Note that all obtained tags are expressed in uppercase, such as "TD", "TR", and ". Code
<! DOCTYPE html PUBLIC "-// W3C // dtd xhtml 1.0 Transitional // EN"
Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd>

<Html xmlns = "http://www.w3.org/1999/xhtml" xml: lang = "en" lang = "en">
<Head>
<Title> </title>
<Script type = "text/javascript">
Function tdclick (){
If (event. srcElement. tagName. toLowerCase () = 'td ')
Alert ("row:" + (event. srcElement. parentNode. rowIndex + 1) + "column:" + (event. srcElement. cellIndex + 1 ));
}
</Script>
</Head>
<Body>
<Table align = "center" onclick = "tdclick () "width =" 100% "height =" 400 "cellspacing =" 1 "border =" 1 "bordercolor =" #000000 "bordercolorlight =" #000000 "bordercolordark =" # C0C0C0 "bgcolor = "# C0C0C0">
<Tr>
<Td> & nbsp; </td>
<Td> & nbsp; </td>
<Td> & nbsp; </td>
<Td> & nbsp; </td>
</Tr>
<Tr>
<Td> & nbsp; </td>
<Td> & nbsp; </td>
<Td> & nbsp; </td>
<Td> & nbsp; </td>
</Tr>
<Tr>
<Td> & nbsp; </td>
<Td> & nbsp; </td>
<Td> & nbsp; </td>
<Td> & nbsp; </td>
</Tr>
</Table>
</Body>
</Html>: