Introduction
A CLICK event is probably the most handled user interaction on computers regardless of types of front-end applications. Be it finance, administration, e-commerce, online education, a click event happens everywhere.
For the majority of browser users, pointing devices such as a mouse, touchpad, stylus, etc are the most convenient ways of interacting with web pages. Web pages capture many of these interactions and respond to them accordingly.
In DOM terminology, interactions with such pointing devices are grouped under MOUSE EVENTS. It is quite helpful for a front-end developer to get familiar with the details of different mouse events in order to create a rich and engaging experience.
For the sake of convenience, we will consider only the mouse and touchpad for the rest of the article. As we know, a mouse is used for 2 main purposes.
- Move a pointer around the web page.
- Interact with certain elements on the page.
Considering these, I have further grouped mouse events into 2 categories. These are not mentioned in the DOM specification. It is just for the sake of making things simpler to understand.
- Action mouse events
- Movement mouse events
Read all articles from this series
Terminology and key concepts
Before we proceed with actual events, we should look at some key terms and concepts. Learning about them will certainly help you understand each event with great clarity.
MouseEvent
All mouse events implement the MouseEvent interface. This interface contains a lot of properties that give us more details about an event.
Modifiers
There are few properties on a MouseEvent object which will tell us if a user has pressed any of the following keys at the time of a mouse event.
- Shift Key (shiftKey)
- Control key (ctrlKey)
- Alt key (altKey)
- Command key for Mac (metaKey)
Geometry
An event object also gives us information about the X and Y coordinates of a mouse event with respect to a reference point. Depending on the reference point, there are 3 types of properties as follows.
- clientX, clientY
- pageX, pageY
- screenX, screenY
Event order
Few mouse events are compound events. It means they are not a single event but a combination of one or more events. e.g A click event consists of a mousedown and a mouseup event.
Event order is nothing but the sequence in which the events of a compound event take place. It is fixed for a particular event. e.g. For a click event is as follows.
- mousedown
- mouseup
- click
It is a good idea to check the event order for compound events to avoid unwanted behavior.
Mouse button
The mouse event object has the property button. This property contains an integer value between 0 and 4 describing which mouse button was pressed.
- 0: Left button (primary)
- 1: Middle/Aux button (auxiliary)
- 2: Right button (secondary)
- 3: X1 button (back)
- 4: X2 button (forward)
Since events like mousedown and mouseup are fired for all mouse buttons, this property is used to differentiate buttons in order to make decisions in our code.
Detail
For events in the action category, this property indicates the current click count and is set to 0 by default. For different events, this value shows different values. We will see it for each event. This value is reset after a certain time span. The span is browser-specific. This property is set to 1 for a single click, 2 for a double click, 3 for a triple-click, and so on.
That's enough briefing for now. Let's move on and check different events.
Categories based on behavior
===Action mouse events===
- mousedown
- mouseup
- click
- dblclick
- contextmenu
We are going to see each event in detail. Here is a codepen link for these 5 events. Try to play with it and check the browser console for more details.
mousedown
When does it occur?
When a mouse button is pressed onto an element, this event is fired. Consider the door open/close example in the codepen above, as we press the mouse button, mousedown is fired. This event is fired for left-click, right-click, and middle click.
Event object properties to look for
- type: mousedown
- button: 0/1/2/3/4
- detail: ++(current click count)
Event order
None.
Counterpoint
mousedown
mouseup
When does it occur?
When a mouse button is released onto an element, this event is fired. Consider the door open/close example in the codepen above, as we release the mouse button, the mouseup is fired. This event is also fired for left-click, right-click, and middle-click.
Event object properties to look for
- type: mouseup
- button: 0/1/2/3/4
- detail: ++(current click count)
Event order
None.
Counterpoint
mouseup
click
When does it occur?
When a primary pointer button is pressed and released on an element, a click event is fired. It is also possible to fire this event by pressing the 'spacebar' or 'enter' key on the keyboard when the element is in focus. It is not fired for mouse buttons other than primary/
In other words, a click event is a combination of mousedown and mouseup events on the same element. While triggering a click event from the keyboard, mousedown and mouseup events are skipped.
Event object properties to look for
- type: click
- button: 1
- detail: ++(current click count)
Event order
mousedown -> mouseup -> click
Counterpoint
None.
dblclick
When does it occur?
When a primary pointer button is pressed and released on an element two consecutive times, a dblclick event is fired. It is not fired for mouse buttons other than primary.
In other words, a dblclick event is a combination of 2 click events in a specific duration on the same element.
Event object properties to look for
- type: dblclick
- button: 1
- detail: ++(current click count)
Event order
mousedown -> mouseup -> click -> mousedown -> mouseup -> click -> dblclick
Counterpoint
None.
contextmenu
When does it occur?
When a secondary pointer button is pressed and released on an element, a contextmenu event is fired. It is not fired for mouse buttons other than secondary.
In other words, a contextmenu event is a combination of a mousedown and mouseup event with button value = 2 on the same element.
Event object properties to look for
- type: contextmenu
- button: 2
- detail: ++(current click count)
Event order
mousedown -> contextmenu -> mouseup
Counterpoint
None.
===Movement mouse events===
- mouseover
- mouseout
- mouseenter
- mouseleave
- mousemove
These are very interesting events as they are sensitive to the movement or the presence of a pointer and react to it.
Following is the pen for code reference.
mouseover
When does it occur?
This event is fired each time when a pointer meets any of the following conditions.
- A pointer moves over the boundaries of an element.
- A pointer moves over the boundaries of an element which is a child of the element.
Event object properties to look for
- type: mouseover
- target: the element inside which the pointer is currently residing.
- relatedTarget: the element in which the pointer was residing before entering this element.
Event order
None.
Counterpoint
mouseout
mouseout
When does it occur?
This event is fired each time when a pointer meets any of the following conditions.
- A pointer moves out of the boundaries of an element.
- A pointer moves out of the boundaries of an element which is a child of the element.
Event object properties to look for
- type: mouseout
- target: the element out of which the pointer is currently moving.
- relatedTarget: the element which the current target is moving into.
Event order
None.
Counterpoint
mouseover
mouseenter
When does it occur?
This event is fired when a pointer enters the element area. This element area consists of an area of all its descendants in addition to its own. The combination of mouseenter and mouseleave may behave like :hover effect in CSS. But it should be restricted in case where requirements cannot be fulfilled with CSS only.
Unlike mouseover, this event does not BUBBLE.
Event object properties to look for
- type: mouseenter
- target: the element in which a pointer is entering
- relatedTarget: the element from which a pointer is exiting
Event order
mouseover -> mouseenter
Counterpoint
mouseleave
mouseleave
When does it occur?
This event is fired when a pointer leaves the element area. This is the counterpart of the mouseenter event.
Event object properties to look for
- type: mouseleave
- target: the element in which a pointer is entering
- relatedTarget: the element from which a pointer is exiting
Event order
mouseout -> mouseleave
Counterpoint
mouseenter
mousemove
When does it occur?
This event is fired when a pointer moves over the element area. This element area consists of an area of all its descendants in addition to its own. The frequency of this event is decided by the browser implementation. Thus you might not be able to capture all of the mouse moves with this event if your pointer is moving too fast.
Event object properties to look for
- type: mousemove
- target: the element over which a pointer is moving
- relatedTarget: null
Event order
mouseover -> mouseenter -> mousemove
Counterpoint
None.
This pretty much is the summary of all mouse events you need to know.
If you want to dig deeper...
References
Finally...
I would strongly recommend that you play with the code I have shared to get a better understanding of each event.
I hope this article contributes a little to your understanding of the topic. I am planning to share a similar article for the Keyboard events very soon.
Till then enjoy and read my other articles in this series.
Stay tuned...