Mouse events are one of the most commonly used events. This event can listen for the following actions:
- click – occurs when an element is clicked
- mousedown – occurs when you click on an element and hold down the mouse button
- mouseup – occurs when the mouse button is released
- mouseover – occurs when the pointer is on an element
- mousemove – occurs when the mouse pointer passes over an element
- mouseout – occurs when the mouse pointer moves out of the element
<head>
<style>
#blueRect {
width: 100px;
height: 100px;
background-color: blue;
}
</style>
</head>
<body>
<div id="blueRect"></div>
<script>
function setColor(e) {
if (e.type === "mouseover")
e.target.style.backgroundColor = "red";
else if (e.type === "mouseout")
e.target.style.backgroundColor = "blue";
}
var blueRect = document.getElementById("blueRect");
blueRect.addEventListener("mouseover", setColor);
blueRect.addEventListener("mouseout", setColor);
</script>
</body>
For different types of events, there are also their own event objects that add a number of their properties. So, to work with mouse pointer events, a MouseEvent object is defined, which adds the following properties:
- altKey – returns true if the Alt key was pressed while the event was being generated
- button – indicates which mouse button was pressed
- clientX – determines the x coordinate of the browser window where the mouse pointer was at the time the event was generated
- clientY – determines the y coordinate of the browser window where the mouse pointer was at the time the event was generated
- ctrlKey – returns true if the Ctrl key was pressed while the event was being generated
- metaKey – returns true if the keyboard metakey was pressed during the event generation
- relatedTarget – defines a secondary source of events
- screenX – determines the x coordinate relative to the upper left corner of the monitor screen, on which the mouse pointer was located during the generation of the event
- screenY – defines the Y coordinate, relative to the top left corner of the monitor screen, where the mouse pointer was at the time the event was generated
- shiftKey – returns true if the Shift key was pressed while the event was being generated
Let’s determine the coordinates of the click:
<head>
<style>
#blueRect{
width:100px;
height:100px;
background-color:blue;
}
</style>
</head>
<body>
<div id="blueRect"></div>
<script>
function handleClick(e){
console.log("screenX: " + e.screenX);
console.log("screenY: " + e.screenY);
console.log("clientX: " + e.clientX);
console.log("clientY: " + e.clientY);
}
var blueRect = document.getElementById("blueRect");
blueRect.addEventListener("click", handleClick);
</script>
</body>