Mouse Events — Angular

Hello awesome people, Hope you are doing great. In this story, we are going to cover different types of mouse events present in angular.

Mouse Events

• Click event occurs when the user clicks the click applied element. click event triggers the function attached to the click.

Note: The difference between click and onclick is that click is an event listener where as the onclick is an event handler content attribute.

click

• When the user double-click the dblclick event triggers on the applied element.

dblclick

• Triggers mouseover, when the cursor is over the applied element (like hover).

mouseover

• Triggers mouseenter, when the mouse pointer is moved onto the applied element.

mouseenter

• Triggers mouseleave, when the mouse pointer leaves the applied element.

mouseleave

• Triggers mousedown, when the user presses the mouse button over the applied element.

mousedown

• Triggers mouseup, when the user releases the mouse button over the applied element.

mouseup

• Triggers dragover event, When the user drags on the applied element.

dragover

• Triggers every time when an item is dragged over drag applied element.

drag

Conclusion

We explored different types of interaction with respect to mouse events. Hope you extracted some knowledge from it. In case of any doubt or if you just want to say Hi! feel free to reach me on LinkedIn or GitHub.

If you like the blog make sure to take a look at my YouTube channel for more amazing stuff.