When I got familiar with the functions of the player in the business, I found that click and drag events were bound to the timeline, and I frequently encountered event attributes such as pageX. Such attributes are often used when the height of an element or the location of an event needs to be dynamically calculated, which has not been systematically summarized in previous studies. Now from the most basic mouse event attributes, a complete comb through the differences between each attribute for future review.

Mouse event properties

MouseEvent. MovementX, MouseEvent. MovementY, MouseEvent. OffsetX, MouseEvent ScreenX, MouseEvent. ScreenY, MouseEvent. X, MouseEvent

  • MouseEvent.clientXIs a read-only property that provides the horizontal coordinates (as opposed to the page coordinates) of the application client area at the time of the event. For example, the mouse event will have a clientX value of 0 when you click on the upper left corner of the client area, regardless of whether the page scrolls horizontally. Originally defined as a long integer, this property has been redefined by the CSSOM view module as a double float. You can consult the documentation in the browser compatibility section for further information.
  • MouseEvent.clientYIs a read-only property that provides the vertical coordinates (as opposed to the page coordinates) of the application client region at the time of the event. For example, when you click on the upper left corner of the client area, the clientY value of the mouse event is 0, which is independent of whether the page has vertical scrolling.
  • MouseEvent.movementXIs a read-only property that provides the horizontal mouse movement value between the current event and the last Mousemove event. In other words, the value is computed as follows: currentevent.movementx = currentevent.screenx-previousevent.screenx.
  • MouseEvent.movementYIs a read-only property that provides the horizontal mouse movement value between the current event and the last Mousemove event. In other words, the value is computed as follows: currentevent.movementy = currentevent.screeny-previousevent.screeny.
  • MouseEvent.offsetXDefines the X-axis offset of the event object’s padding edge from the target node.
  • MouseEvent.offsetYDefines the Y offset of the event object’s padding edge from the target node.
  • MouseEvent.pageXIs a read-only property returned by the MouseEvent interface with x (horizontal) coordinates relative to the entire document in pixels. This property takes into account horizontal scrolling on any page, based on the edge of the document. For example, if you scroll 200px to the right and the scroll bar appears, which is outside the window, then click 100px to the left of the window and the pageX will return 300.
  • MouseEvent.pageYIs a read-only property that returns the position of the event that was triggered relative to the y-coordinate of the entire Document. Since the reference is the entire DOM, this value is affected by the vertical scrolling of the page. For example: When you scroll down 50 pixels vertically, you get 50pixed pageY instead of 0 when you click at the top.
  • MouseEvent.screenXIs a read-only property that provides the horizontal offset of the mouse relative to the screen coordinate system.
  • MouseEvent.screenYIs a read-only property that provides the vertical offset of the mouse relative to the screen coordinate system.
  • MouseEvent.xIs the alias of the MouseEvent. ClientX property.
  • MouseEvent.yProperty is another name for the MouseEvent. ClientY property.

Element attributes

Element is a very versatile base class from which all objects under the Document object inherit. This interface describes methods and attributes that are common to all elements of the same kind. Interfaces that inherit from Element and add additional functionality describe specific behavior. For example, the HTMLElement interface is the base interface for all HTML elements, while the SVGElement interface is the base for all SVG elements. Most of the functionality is further defined in the hierarchy interface of the class.

  • Element.clientHeightIs a read-only property, 0 for elements that do not define CSS or inline layout boxes; otherwise, it is the height (in pixels) inside the element, including padding, but excluding horizontal scrollbars, borders, and margins. ClientHeight can be calculated using CSS height + CSS padding – horizontal scroller height (if present).
  • Element.clientWidthThe clientWidth property for read-only attributes, inline elements, and elements without CSS styles has a value of 0. The element. clientWidth property represents the internal width of an Element, in pixels. This property includes inside margins, but not vertical scroll bars (if any), borders, and margins.

  • Element.clientLeftRepresents the width of the left border of an element, in pixels. This property includes the width of the scroll bar if the element’s text orientation is right-to-left (RTL, right-to-left) and a vertical scroll bar appears on the left due to content overflow. ClientLeft does not include left margin and left inner margin. ClientLeft is read-only.
  • Element.clientTopThe width, in pixels, of the top border of an element. Does not include top margins or inside margins. ClientTop is read-only.

  • Element.scrollHeightThis read-only attribute is a measure of the height of an element’s content, including content that is not visible in the view due to overflow. The value of scrollHeight is equal to the minimum height that the element needs to fit into the content used in the viewport without the use of scroll bars. Without the vertical scroll bar, the scrollHeight is the same as the clientHeight minimum that the element view needs to fill everything. The padding of the element is included, but the border and margin are not. ScrollHeight also includes pseudo-elements like ::before and ::after.
  • Element.scrollWidthThis read-only property is a measure of the content width of the element, including content that is not visible on the screen due to overflow. The scrollWidth value is equal to the minimum width required for the element to fit all the contents of the viewport without using horizontal scrollbars. Width is measured in the same way as clientWidth: it contains the inner margin of the element, but does not include borders, margins, or vertical scroll bars (if present). It can also include the width of pseudo-elements, such as ::before or ::after. If the content of an element can fit without a horizontal scroll bar, its scrollWidth is equal to clientWidth

  • Element.scrollLeftYou can read or set the distance from the element scroll bar to the left of the element. Note that if the content of this element is RTL (right-to-left), the scroll bar will be at the far right (at the beginning of the content) and the value of scrollLeft will be 0. At this point, when you drag the scrollbar from right to left, the scrollLeft changes from 0 to negative (this feature doesn’t exist in Chrome).
  • Element.scrollTopGets or sets the number of pixels by which the content of an element scrolls vertically. The scrollTop value of an element is a measure of the distance from the top of the element to the visible content of the viewport. When the content of an element does not produce a vertical scroll bar, its scrollTop value is 0.

HTMLElement Interface attribute

The HTMLElement interface represents all HTML elements. Some HTML elements implement the HTMLElement interface directly, while others implement the HTMLElement interface indirectly.

  • HTMLElement.offsetHeightIs a read-only property that returns the pixel height of the element, which contains the element’s vertical inner margin and border, and is an integer. In general, an element’s offsetHeight is a measure of the CSS height of an element, including its border, inner margin, and horizontal scroll bar (if present and rendered), not the height of pseudo-class elements such as :before or :after. For the body object of the document, it includes a high linear total content of CSS in place of elements. The descending content height of the floating element is ignored. If the element is hidden (for example, if the style.display of the element or one of its ancestors is set to None), 0 is returned
  • HTMLElement.offsetWidthIs a read-only property that returns the layout width of an element. A typical example OffsetWidth measures the border, padding, vertical scrollbar (if any), and CSS set width of the containing element.

  • HTMLElement.offsetLeftIs a read-only property that returns the pixel value of the upper-left corner of the current element offset from the left boundary of the htmlElement. offsetParent node. For block-level elements, offsetTop, offsetLeft, offsetWidth, and offsetHeight describe the element’s bounding box relative to offsetParent. However, for inline elements that can be truncated to the next line (such as span), offsetTop and offsetLeft describe the position of the first bounding box (use element.getClientrects () to get its width and height), And offsetWidth and offsetHeight describes the dimensions of the bounding box (use Element. GetBoundingClientRect to gain its position). Therefore, a box that uses offsetLeft, offsetTop, offsetWidth, offsetHeight to correspond to left, top, width, and height will not be the box boundary of the text container SPAN.
  • HTMLElement.offsetTopIs a read-only property that returns the distance of the current element relative to the top inner margin of its offsetParent element.
  • HTMLElement.offsetParentIs a read-only property that returns a pointer to the nearest (at the contain level) location element that contains the element or to the nearest table, TD,th, or body element. When element style.display is set to “None”, offsetParent returns NULL. OffsetParent is useful because offsetTop and offsetLeft are both relative to their inner margin boundaries.

The window properties

The window object represents a window containing a DOM document, with the Document attribute pointing to the DOM document loaded in the window. Use the document.defaultView property to get the window of the specified document.

Window, as a global variable, represents the window in which the script is running and is exposed to Javascript code.

This section provides a brief reference to all the methods, properties, and events available in the DOM Window object. The Window object implements the Window interface, which inherits from AbstractView. Some additional global functions, namespaces, objects, interfaces, and constructors that are not typically associated with Window, but are valid, are listed in the JavaScript reference and DOM reference.

In tabbed browsers, each TAB has its own Window object; That is, the tabs of the same window do not share a Window object. Some methods, such as window.resizeto and window.resizeby, apply to the entire window rather than the tag to which the window object belongs. In general, if something doesn’t work properly on a label, it will work on a window.

  • Window.innerHeightThe viewport height of the browser window, in pixels; If there is a horizontal scrollbar, include the scrollbar height.
  • Window.innerWidthViewport width (in pixels) of the browser, including vertical scroll bars if present.
  • Window.outerHeightOuterHeight Retrieves the height (in pixels) of the entire browser Window, including sidebars (if present), Window borders (Window Chrome), and Window resizing Borders /handles.
  • Window.outerWidthGets the width outside the browser window. Represents the width of the entire browser window, including sidebars (if present), window borders (Window Chrome), and window resizing borders/handles.

  • Window.screenLeftThe read-only property returns the distance from the left border of the browser to the edge of the left screen, in pixels of CSS.
  • Window.screenTopThe read-only property returns the vertical distance, in CSS pixels, from the top edge of the user’s browser to the very top of the screen.
  • Window.screenXReturns the horizontal distance from the left edge of the browser to the left edge of the operating system desktop.
  • Window.screenYReturn to the vertical distance between the top of the browser and the top of the system desktop.
  • Window.scrollXReturns the pixel value of the document/page scrolling horizontally. The pageXOffset property is the alias of the scrollY property
  • Window.scrollYReturns the vertical scrolling pixel value of the document. The pageYOffset property is the alias of the scrollY property

Screen properties

The Screen interface represents a Screen window, usually referring to the window object currently being rendered, which can be retrieved using window.screen.

  • Screen.availTopThe amount of space a browser window can take up on the screen.
  • Screen.availLeftReturns the distance between the left side of the browser’s available space and the left edge of the screen (system desktop).
  • Screen.availHeightReturns the maximum vertical space that the browser window can occupy on the screen.
  • Screen.availWidthReturns the horizontal width (in pixels) that the browser window can occupy.
  • Screen.heightReturns the height of the screen in pixels.
  • Screen.widthReturns the width of the screen.