In this blog you are going to learn Mouse Events
There are five types of Mouse Events that are given in our image below.
![](https://www.devopsschool.com/blog/wp-content/uploads/2020/08/mouse.png)
Let’s understand each other one by one.
Click => On hearing the name of the click, you must have understood that as soon as the mouse goes and clicks, the code function that we have given will work, we understand with an example.
Example:
![](https://www.devopsschool.com/blog/wp-content/uploads/2020/08/click-code.png)
Some such results can be seen in our browser.
![](https://www.devopsschool.com/blog/wp-content/uploads/2020/08/1-1024x240.png)
This type of browser opens after clicking
![](https://www.devopsschool.com/blog/wp-content/uploads/2020/08/click2-1024x233.png)
dblClick => This means that as soon as we double click on our page, what we have written in the function will work as we have explained in the example.
Example
![](https://www.devopsschool.com/blog/wp-content/uploads/2020/08/dbl.png)
Our result after double clicking
![](https://www.devopsschool.com/blog/wp-content/uploads/2020/08/dbl2-1024x225.png)
contextmenu => This means that as soon as we right click, then what we have given in the code will work as we have shown in the example.
Example:
![](https://www.devopsschool.com/blog/wp-content/uploads/2020/08/right1.png)
My result after right clicking
![](https://www.devopsschool.com/blog/wp-content/uploads/2020/08/right-1024x222.png)
mouseenter => This means that if we move the mouse to the target which we have targeted, then the function will work as we have explained in the example.
Example:
![](https://www.devopsschool.com/blog/wp-content/uploads/2020/08/target-1.png)
My result when moving the mouse near the target
![](https://www.devopsschool.com/blog/wp-content/uploads/2020/08/textexmple-1024x218.png)
mouseleave => This means that as soon as we move away from the code on which the mouse is written, my function will work. As we explained in the example
Example:
![](https://www.devopsschool.com/blog/wp-content/uploads/2020/08/leave.png)
My result as soon as the mouse was removed from there
![](https://www.devopsschool.com/blog/wp-content/uploads/2020/08/result56-1024x224.png)
- How to remove sensitive warning from ms office powerpoint - July 14, 2024
- AIOps and DevOps: A Powerful Duo for Modern IT Operations - July 14, 2024
- Leveraging DevOps and AI Together: Benefits and Synergies - July 14, 2024