Skip to content

Mouse events

The Valley of Code

Your Web Development Manual

Discover the basics of working with mouse events in JavaScript

See more on JavaScript events

When looking at mouse events we have the ability to interact with

Events overlap. When you track a click event, itโ€™s like tracking a mousedown followed by a mouseup event. In the case of dblclick, click is also fired two times.

mousedown, mousemove and mouseup can be used in combination to track drag-and-drop events.

Be careful with mousemove, as it fires many times during the mouse movement. We need to apply throttling, which is something weโ€™ll talk more when weโ€™ll analyze scrolling.

When inside an eventh handler we have access to lots of properties.

For example on a mouse event we can check which mouse button was pressed by checking the button property of the event object:

const link = document.getElementById('my-link')
link.addEventListener('mousedown', (event) => {
  // mouse button pressed
  console.log(event.button) //0=left, 2=right
})

Here are all the properties we can use:

โ†’ Read my DOM Tutorial on The Valley of Code
โ†’ Read my Browser Events Tutorial on The Valley of Code
โ†’ Read my Browser APIs Tutorials on The Valley of Code
h
  • THE VALLEY OF CODE (+ PRO), your web development manual
  • I wrote 15+ free coding BOOKS, download them here
  • SOLOPRENEUR LAND the missing MBA for wannabe solopreneurs craving a life with more freedom, control, fulfillment and purpose (summer 2024)