# Mouse Events

Next semester we will be talking a lot more about Touch Events, Pointer Events, and Gestures. These are the events designed to work with touch-capable devices, styluses, and fingers.

For now, we will be focused on the mouse events. All the touch events fall back to the mouse ones. If you want to know when a user touches your webpage with their finger, just know that that touch will trigger a touchstart and touchend events as well as a mousedown, mouseup, and click events.

The available mouse events are:

mousedown; //left mouse button pressed down
mouseup; //left mouse button released
mousemove; //left mouse cursor is moving
click; //left mouse button pressed and released over the same element
dblclick; //left mouse button pressed and released twice quickly
contextmenu; //right mouse button pressed
mouseenter; //mouse cursor entering an area
mouseover; //mouse cursor entering an area
mouseleave; //mouse cursor leaving an area
mouseout; //mouse cursor leaving an area

1
2
3
4
5
6
7
8
9
10

Here are a few samples of the event listeners being added to elements

let btn = document.getElementById("#startButton");
btn.addEventListener("click", doSomething);
let p = document.getElementById("#ad");
p.addEventListener("contextmenu", showOptions);
let links = document.querySelectorAll("#mainNav a");
links.forEach(function(link) {
  link.addEventListener("click", goNav);
  //add the event listener to ALL the links inside #mainNav
});

1
2
3
4
5
6
7
8
9

Back to Week 6 main page