Notes on Day 27 of 30 Days of JavaScript

• notes • series • javascript • javascript30

I learned a lot about mouse-related event listeners!

Table of Contents

Lessons Learned

Mouse events

The following are available event listeners for mouse or any pounting devices:

Element: mousedown event

mousedown is fired when a cursor is pressed while inside the area of the target element.

element.addEventListener('mousedown', () => element.classList.add('active'))

Element: mouseup event

mouseup, the opposite of mousedown, is fired when the cursor is released inside the area of the target element.

element.addEventListener('mouseup', () => element.classList.remove('active'))

Element: mouseenter event

mouseenter is fired when a cursor is moved so that it is located inside the target element with the event listener.

Element: mouseleave event

mouseleave is fired when a cursor is moved out of the target element with the event listener.

Element: mousemove event

`mousemove1 is fired when the cursor is moved while the cursor’s hotspot is inside the target element with the event listener.

cursor: grabbing

This cursor represents the “grabbing” or “closed hand” key and is usually used for drag and drop features.

.grabbing {
  cursor: grabbing;
  cursor: -moz-grabbing;
  cursor: -webkit-grabbing;
}

References

Twitter, LinkedIn