Mouse Events

Hey ,

I'm thrilled to help you learn JavaScript. Unfortunately, you've landed on a page where you cannot access with your current purchase.

Please upgrade (use this link) access this content.

I'm super eager to help you learn more!

Mouse Events

I categorize mouse events into two categories:

1. Click-related events
2. Move-related events

Click-related events

Click events happen when you click a mouse button. There are four click events:

1. click
2. dblclick
3. contextmenu
4. auxclick

click triggers when you click the primary mouse button. For most people, this would be the left mouse button.

document.addEventListener('click', event => {
  console.log('click')
})

dblclick triggers when you click the primary mouse button two times quickly. There’s no standard on what “quickly” means. However, Microsoft documented “quickly” as 500ms on Windows).

Note: A dblclick event can only be triggered after two click events.

document.addEventListener('click', event => {
  console.log('click')
})

document.addEventListener('dblclick', event => {
  console.log('dblclick')
})

contextmenu triggers when you right click on a mouse to bring up the context menu.

document.addEventListener('contextmenu', event => {
  console.log('contextmenu')
})

auxclick triggers when you click a mouse button that does not trigger click and contextmenu. In the gif below, I clicked the mouse wheel.

Most websites don’t use auxclick. Also Safari doesn’t support auxclick.

document.addEventListener('auxclick', event => {
  console.log('auxclick')
})

mousedown and mouseup

A mousedown event triggers when you press down a mouse button. All click events begin with mousedown.

A mouseup event triggers when you release a mouse button. It triggers before all click events. There’s one exception: mouseup doesn’t trigger when contextmenu appears.

document.addEventListener('mousedown', event => {
  console.log('mousedown')
})

document.addEventListener('mouseup', event => {
  console.log('mouseup')
})

document.addEventListener('click', event => {
  console.log('click')
})

document.addEventListener('contextmenu', event => {
  console.log('contextmenu')
})

Move-related events

Move events happen when you move a mouse. There are five possible move events:

1. mousemove
2. mouseenter
3. mouseover
4. mouseleave
5. mouseout

Mousemove

mousemove happens when you move the mouse.

document.addEventListener('mousemove', event => {
  console.log('mousemove')
})

Mouseenter and Mouseover

mouseenter triggers when your mouse moves into an element.

document.addEventListener('mouseenter', event => {
  console.log('mouseenter')
})

mouseover triggers when your mouse moves over an element.

document.addEventListener('mouseover', event => {
  console.log('mouseover')
})

Notice the number of mouseover logs jump from 1 to 3 when the mouse goes into Element 2? This happens because mouseover bubbles.

We can verify the bubbling by logging currentTarget.

We don’t usually use mouseover because of its bubbling nature. It creates too many events.

Mouseleave and mouseout

mouseleave triggers when your mouse leaves an element.

mouseout triggers when two things happen:

1. When your mouse moves into a child element
2. When your mouse moves out of an element

Notice mouseout logs jump from 1 to 3? Like mouseover, mouseout bubbles as well. We can confirm the bubbling by logging the currentTarget.

Again, we don’t usually use mouseout because of its bubbling nature. It creates too many events.

Mouse event properties

Mouse-related event properties can be categorized into 4 groups:

1. Position of the mouse cursor
2. Indication of keyboard modifiers
3. Indication of mouse button
4. Canvas

Position of the mouse cursor

There are 5 groups of methods that gives you the position of a mouse cursor:

1. pageX & pageY: Position of mouse relative to the page
2. clientX & clientY: Position of mouse relative to the DOM
3. screenX & screenY: Position of mouse relative to the screen
4. offsetX & offsetY: Position of mouse relative to padding edge of the target node
5. movementX & movementY: Position of mouse relative to the previous mousemove event

Note: pageX & pageY and clientX & clientY the same for most cases. But if you trigger the mouse event from an <iframe>, clientX & clientY can detect the mouse position from the <iframe>.

Feel free to use clientX and clientY over pageX and pageY.

Indication of keyboard modifiers

You can detect whether a keyboard modifier is pressed when the event triggers. These should be familiar to you since you’ve done the Keyboard module.

1. altkey: Whether the Alt key is pressed
2. ctrlKey: Whether the Control key is pressed
3. metaKey: Whether Command (Mac) or Windows (Win) is pressed
4. shiftKey: Whether the Shift key is pressed

Indication of mouse buttons

You can tell which mouse button pressed by these two properties:

• button: The button number that was pressed
• buttons: Number of each button that are pressed

We rarely use this, but I’m including it for the sake of completeness. See this to understand what each button number refers to.

Indication of canvas

event.region gives you the <canvas> element if you’re inside on. You will only need it if you use the <canvas> element.

We won’t use it in this course.