Types of Mouse Events

  • mousedown / mouseup: Mouse button is pressed / released
  • click: Triggered after mousedown and mouseup on the same element
  • dblclick: Double click
  • mousemove: Mouse is moved
  • mouseover / mouseout: Mouse enters / leaves an element

Mouse Event Properties

  • clientX / clientY: Coordinates relative to the window
  • pageX / pageY: Coordinates relative to the document
  • which: Which mouse button was pressed (1: left, 2: middle, 3: right)

Example:

document.addEventListener('mousemove', function(event) {
  console.log('Mouse position:', event.clientX, event.clientY);
});

Drag and Drop

You can implement drag and drop functionality using mouse events:

let draggable = document.getElementById('draggable');
let isDragging = false;
let startX, startY;

draggable.addEventListener('mousedown', function(event) {
  isDragging = true;
  startX = event.clientX - draggable.offsetLeft;
  startY = event.clientY - draggable.offsetTop;
});

document.addEventListener('mousemove', function(event) {
  if (isDragging) {
    draggable.style.left = (event.clientX - startX) + 'px';
    draggable.style.top = (event.clientY - startY) + 'px';
  }
});

document.addEventListener('mouseup', function() {
  isDragging = false;
});