In this article, you will learn about the mouse events and its associative properties and how JavaScript handles mouse events.
Here is the table of events related to mouse.
| Mouse events | Description |
| click | Press a button element |
| dblclick | Double click a button element |
| mousedown | Press the mouse button |
| mouseup | Release the mouse button |
| mousemove | Mouse pointer moved from one location to another |
| mouseleave | When mouse pointer move away from HTML element |
| mouseenter | When mouse pointer move onto an html element |
Mouse Event Properties
| Mouse Event Properties | Description |
| button | Return which button was pressed |
| client X and clientY | Coordinates relative to the view port ( the visible part of the document) |
| pageX and clientY | Coordinates relative to the actual document page. |
| screenX and screenY | Coordinates relative to the screen |
| altKey, ctrlKey, shiftkey | Return boolean true or false when alt, shift or ctrl key is pressed. |
clientX and clientY
<body>
<p>clientX:<span id="cx">X</span></p>
<p>clientY:<span id="cy">Y</span></p>
<script>
var s = document.getElementById("cx");
var d = document.getElementById("cy");
window.addEventListener('mousemove',processMove);
window.addEventListener('mousemove',processMove);
function processMove(evt){
s.innerHTML = evt.clientX;
d.innerHTML = evt.clientY;
}
</script>
</body>pageX and pageY
var s = document.getElementById("cx");
var d = document.getElementById("cy");
window.addEventListener('mousemove',processMove);
window.addEventListener('mousemove',processMove);
function processMove(evt){
s.innerHTML = evt.pageX;
d.innerHTML = evt.pageY;AltKey and ShiftKey
<body>
<p>AltKey :<span id="altt"></span></p>
<p>ShiftKey :<span id="shiftt"></span></p>
<script>
window.onkeydown = pressSpecial;
var d = document.getElementById("altt");
var s = document.getElementById("shiftt");
function pressSpecial(evt)
{
d.innerHTML = evt.altKey;
s.innerHTML = evt.shiftKey;
}
</script>
</body>In the example above, whenever user press the ctrl, shift key, it is displayed in the HTML
