Mouse Events
Question:
Describe at least 4 properties on the mouse event object and explain what they are used for.
Let’s talk about four mouse events that I would like to explain in more detail. I will talk about the click, mouseover, mouseout and mouseup.
click
The click event does what you expect it fires the event listener on a mouse click . Let’s show this.
See the Pen click by oscar (@nopity) on CodePen.
We used the click listener on the div and as you can see changed the text.
mouseover
The mouseover activate when you role your mouse over a target element.
See the Pen Wjqbvd by oscar (@nopity) on CodePen.
Also in this example I included mouseout which is a bit different than mouseleave in that it only activates when you leave the container that holdes it’s decendants but in this case we have made it work like mouseleave.
mouseout
see above
- mouseup
The mouseup has special use cases. It doesn’t need the default mouse button to fired(you can use the scroll will held down) and you can hold your click on a different part of the page and let it go over the target and it will work.