Mouse event in jQuery

Mouse events are the event that are performed using mouse like clicking mouse, double clicking mouse, hovering mouse and many more.

Following are the mouse events in jQuery -

1. Click event – The click event happened or fired when mouse button is clicked. For this click event click() method is used.

For example a user click on a paragraph on web page. So to assign the click events the syntax will be –

Syntax - $("p”).click() ;

Now if we want to do something when a user click on a paragraph, The syntax of function will be –

For example we want to hide all paragraphs when a user click on a paragraph on web page.

The syntax will be –

The above code will hide all paragraphs when a user click on a paragraph on web page.

If we want to hide only the paragraph on which user clicks, We have to use ‘this’ keyword in place of ‘p’ tag inside the function.

The above code will hide one the paragraph on which user clicks.

2. Double click event - This events is fired when a user double click on any element on a web page.

dbclick() – method is used for double click event in jQuery.

The syntax for this will be –

Syntax - $(“p”).dbclick() ;

For example we want to hide a paragraph when a user double click on a paragraph. The syntax will be –

3. Mouse enter event – This events fires when mouse pointer enters an element on a web page.

mouseenter() – Method is used for mouse enter event in jQuery.

The syntax will be -

We can use functions for this event as we do in above examples.

4. Mouse leave event – This events fires when mouse pointer leave an element on a web page.

mouseleave() - Method is used for mouse leave event in jQuery.

In the next chapter we will discuss keyboard events.

CSEtutorials