JavaScript Event object Clientx,offsetx,screenx similarities and differences

The event object is one of the most important objects in JavaScript, he represents the status of various events, often used in event handling of various events, such as keyboard activities, mouse activities, and so on, several of the official said the more vague, difficult to understand, it is necessary to popularize the understanding.

Concept (not official, from Network):

ClientX Sets or gets the x-coordinate of the position of the mouse pointer relative to the window client area, where the customer area does not include controls and scroll bars for the window itself.
ClientY Sets or gets the y-coordinate of the position of the mouse pointer relative to the window's client area, where the customer area does not include controls and scroll bars for the window itself.
OffsetX Sets or gets the x-coordinate of the position of the mouse pointer relative to the object that triggered the event.
OffsetY Sets or gets the y-coordinate of the position of the mouse pointer relative to the object that triggered the event.
ScreenX Sets or gets the x-coordinate that gets the position of the mouse pointer relative to the user's screen.
ScreenY Sets or gets the y-coordinate of the mouse pointer position relative to the user's screen.
x Sets or gets the X-pixel coordinates of the position of the mouse pointer relative to the parent document.
Y Sets or gets the Y-pixel coordinates of the position of the mouse pointer relative to the parent document.

Add:

Pagex,pagey

As the name implies, this property is the position of the mouse click position relative to the page when the event occurs, usually when no scroll bar appears in the browser window. This property is equivalent to Event.clientx and Event.clienty, but when the browser appears with scrollbars, Pagex is usually greater than clientx because the page also has the width and height of the part that is being rolled up

Specific analysis experiment point here. It has been analyzed very clearly, this is the more thorough on-line blog. In order to understand this state, I have made one, hoping to help understand and deepen memory.

Note that this is the run diagram in the above post, and the event is click on the trigger point in the diagram. A line represents the range of calculations for various values.

Original: http://www.cnblogs.com/long_/archive/2010/09/09/1822574.html

JavaScript Event object Clientx,offsetx,screenx similarities and differences