How to handle mouse events?
In JavaScript, mouse events let you respond to user interactions with the mouse (clicks, movement, scrolling, etc.). You handle them by attaching event listeners to DOM elements.
✅ Common Mouse Events
click→ Fired when the element is clicked.dblclick→ Fired on a double click.mousedown→ Fired when the mouse button is pressed down.mouseup→ Fired when the mouse button is released.mousemove→ Fired when the mouse moves over an element.mouseover→ Fired when the mouse enters an element (bubbles).mouseout→ Fired when the mouse leaves an element.mouseenter→ Likemouseoverbut does not bubble.mouseleave→ Likemouseoutbut does not bubble.contextmenu→ Fired on right-click (before the context menu appears).
✅ Example: Handling Mouse Events
<button id="btn">Click Me</button>
<div id="box" style="width:200px;height:200px;background:lightblue;"></div>
<script>
const btn = document.getElementById("btn");
const box = document.getElementById("box");
// Click event
btn.addEventListener("click", () => {
alert("Button clicked!");
});
// Mouse over & out
box.addEventListener("mouseover", () => {
box.style.background = "lightgreen";
});
box.addEventListener("mouseout", () => {
box.style.background = "lightblue";
});
// Mouse move
box.addEventListener("mousemove", (event) => {
console.log(`Mouse at: X=${event.clientX}, Y=${event.clientY}`);
});
</script>
✅ Event Object Properties
Inside mouse event handlers, you can use the event object:
event.clientX,event.clientY→ Position relative to viewportevent.pageX,event.pageY→ Position relative to pageevent.button→ Which button was pressed (0 = left, 1 = middle, 2 = right)event.altKey,event.ctrlKey,event.shiftKey→ Modifier keysevent.target→ Element that triggered the event
No comments yet! You be the first to comment.