jQuery Mouse Events With Examples

The click() method is used to attach an event handler function to an HTML element.

The function is called when the user clicks on the HTML element.

When a click event occurs on a p> element, hide the current p> element, as seen in the following example:

Example of .click() mouse event in jQuery

$("p").click(function(){
  $(this).hide();
});

The dblclick() approach attaches an event handler function to an HTML element.

The method is called when the user double-clicks on the HTML element:

Example of dblclick() mouse event in jQuery

$("p").
dblclick(function(){
  $(this).hide();
});

hover() includes two functions and It is a combination of the mouseenter() and mouseleave() methods.

When the mouse enters the HTML element, the first function is called, and when the mouse leaves the HTML element, the second function is called:

Example of hover mouse event in jQuery

$("#p1").hover(function(){
  alert("You entered p1!");
},
function(){
  alert("Bye! You now leave p1!");
});

The mouse down() technique is used to attach an event handler function to an HTML element.

When the left, middle, or right mouse button is pressed while the mouse is over the HTML element, the function is called:

Example of .mousedown mouse event in jQuery

$("#p1").mousedown(function(){
  alert("Mouse down over p1!");
});

The mouse enter() approach is used to attach an event handler function to an HTML element.

When the mouse pointer enters the HTML element, the function is called:

Example of mouseenter mouse event in jQuery

$("#p1").mouseenter(function(){
  alert("You entered p1!");
});