Learn about Javascript Event objects

Make writing a habit together! This is the 14th day of my participation in the “Gold Digging Day New Plan · April More Text Challenge”. Click here for more details

When we click on an element, we generate an Event object, so what does that have? This article takes you to know:

<button id="demo">event</button>
<script>
  let demo = document.getElementById('demo');
  demo.addEventListener('click'.function(event) {
    console.log(event)
  })
</script>
Copy the code

As shown above, the Event object contains numerous properties and methods. Let’s look at some of the more important ones…

clientX / clientY

Both clientX and clientY are read-only attributes that provide the horizontal and vertical coordinates of the client region at the time of the event. ClientX and clientY are 0 in the upper left corner of the client area regardless of whether the page scrolls.

Note: The origin is the upper left corner of the ** viewable area (client) **

offsetX / offsetY

Both offsetX and offsetY are read-only attributes that specify the X or Y offset of the event object from the target node’s padding edge.

Note: The origin is the upper-left corner of the target element (including the padding)

screenX / screenY

ScreenX and screenY are read-only properties that provide horizontal and vertical distance of the event mouse across the global (screen).

Note: The origin is the upper-left corner of the screen

The position of the clicked element relative to the upper left corner of the computer screen is calculated as the origin of the coordinates. The value of the feeling is not very accurate, it is good to know…

layerX / layerY

LayerX and layerY are both read-only properties.

If the target element itself has a positioning attribute, the upper-left corner of the target element (including the padding) is used as the origin. If the target element has no location attribute, calculate the distance by looking up at the upper left corner of the parent element. If neither parent element has a positioning attribute, the upper-left corner of the body element is used as the origin.

You don’t use it very much, just know…

pageX / pageY

PageX and pageY are read-only attributes that represent horizontal or vertical coordinates relative to the entire document. These two properties are based on the edges of the document, taking into account horizontal or vertical scrolling on any page.

Note: The origin is the upper-left corner of the document

The difference between so many properties, the main thing is to determine where the origin should be.

After that, have you gotten a feel for the calculations associated with Angular and RXJS drag-and-drop?

【 the 】 ✅