This article explains how to obtain event information for mouse movements using JavaScript.
I would like to know how to obtain event information regarding mouse movements using JavaScript. How can I do this?
Use addEventListener to obtain mouse event information.
mouse event object
The properties of the event object related to the mouse are as follows.
| properties | explanation |
|---|---|
| clientX | Get the X coordinate of the mouse when the event occurs |
| clientY | Get the Y coordinate of the mouse when the event occurs |
| screenX | Get the X coordinate of the mouse when the event occurs, based on the entire screen |
| screenY | Get the Y coordinate of the mouse when the event occurs, based on the entire screen |
| pageX | Get the X coordinate of the mouse when the event occurs, relative to the entire document |
| pageY | Get the Y coordinate of the mouse when the event occurs, relative to the entire document |
| offsetX | Get the X coordinate of the mouse when the event occurs, based on the event occurrence element |
| offsetY | Get the Y coordinate of the mouse when the event occurs, based on the event occurrence element |
| buttons | Get the flag value representing information about the pressed mouse button |
| button | Get the number of the clicked mouse button |
The coordinates of each property are shown in the figure below.
How to get mouse event information
To obtain mouse event information, do the following:
- Register an event listener
- Get event information
- Get mouse coordinate information
How to register an event listener
Use the addEventListener() method to handle events. By using this method, you can detect mouse events.
How to get event information
When a mouse event occurs, you can use the event object in an event listener to obtain information about the mouse movement. For example, you can retrieve information such as the type of mouse click (left click, right click), the coordinates of the click, whether you are dragging, whether you are scrolling.
How to get mouse coordinate information
To obtain mouse coordinate information, use the clientX and clientY properties. These properties allow you to obtain the X and Y coordinates of where the mouse pointer is currently located.
Sample program to obtain mouse event information
In the code below, mouseenteran event occurs when the mouse hovers over an element, and mousemovean event occurs when the mouse moves. When each event occurs, the mouse coordinate information is output to the console.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Obtain mouse event information</title>
<style>
#box {
width: 200px;
height: 200px;
background-color: pink;
}
</style>
</head>
<body>
<div id="box"></div>
<script>
const box = document.getElementById('box');
function handleMouseEnter(event) {
console.log(`Mouse entered! X: ${event.pageX}, Y: ${event.pageY}`);
}
function handleMouseMove(event) {
console.log(`Mouse moved! X: ${event.pageX}, Y: ${event.pageY}`);
}
box.addEventListener('mouseenter', handleMouseEnter);
box.addEventListener('mousemove', handleMouseMove);
</script>
</body>
</html>When you run the above code, coordinate information will be displayed in the console when you hover over an element or move the mouse. In this way, by using mouse-related properties, you can obtain mouse coordinate information, button information, etc.
summary
We explained how to obtain event information for mouse movements.
- Mouse event information can be obtained using the MouseEvent object.
- Mouse events can be detected using the addEventListener() method.
- Information about mouse movements can be obtained by using the event object in an event listener.
- Mouse information that can be obtained using event objects includes click type, coordinates, drag state, scroll state, etc.
- Mouse coordinate information can be obtained using the clientX and clientY properties.
I now understand how to obtain mouse events and event properties!
By registering an event listener, you can detect mouse events and use the event object to obtain information about mouse movements.
Comments