jQuery Mouse Events

Hello guys, welcome to our website wearewriter.com. Today one another topic of jQuery fundamental is jQuery events. This article will explain different mouse events occurring based on mouse positions on a particular HTML element.

In previous tutorial we discussed about the another jQuery fundamental topic is jquery Effects.

You can also visit jQuery official website www.jquery.com.

4 type of jQuery Events:

  1. Mouse event.
  2. Keyboard event.
  3. Form event .
  4. Window/Document event .

Mouse event.

These are following mouse events –

  • click
  • dblclick
  • mouseenter
  • mouseleave
  • hover

Click () method

click events are performed when you click any HTML element.

SYNTAX-

$(selector).click()  

EXAMPLE-

<!DOCTYPE html>  
<html>  
<head>  
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>  
<script>  
$(document).ready(function(){  
    $("p").click(function(){  
        alert("This paragraph was clicked.");  
    });  
});  
</script>  
</head>  
<body>  
<p>Click on the button.</p>  
</body>  
</html>

OUTPUT-:

wrw

Double click /dblclick() method

Double click method are used in jquery .when you double click in the button then dialog box will we open .

SYNTAX

$(selector).dblclick()  

EXAMPLE-:

<!DOCTYPE html>  
<html>  
<head>  
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>  
<script>  
$(document).ready(function(){  
    $("p").dblclick(function(){  
        alert("WELCOME TO WEAREWRITER.COM .");  
    });  
});  
</script>  
</head>  
<body>  
	<H1>Jquery events by wearewriter.com</H1>
	<p><i>dblclick event method</i></p>
<p style="background-color: red; width: 300px; text-align: center;color: white;padding: 20px;" >Double click on the button.</p>  
</body>  
</html> 

OUTPUT-

wearewriter

JQuery mouseenter()

jquery mouseenter () method are used when you trigger the mouse in html element.

When you enter your mouse cursor over the selected element, it triggers the mouseenter event and once the mouseenter event is occurred, it executes the mouseenter() method to attach the event handler function to run.

SYNTAX-

$(selector).mouseenter()  

Attach a function to the mouseenter event:

$(selector).mouseenter(function)
ParameterDescription
function
It is a Optional perameter. Specifies the function to run when the mouseenter event is triggered

EXAMPLE- here you can see that the how you can use click event with mouseenter method.

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
  $("p").mouseenter(function(){
    $("p").css("background-color", "red");
  });
  $("#btn1").click(function(){
    $("p").mouseenter();
  });   
});
</script>
</head>
<body>
<H1>Jquery events by wearewriter.com</H1>
<p>This mouseenter event method.</p>

<button id="btn1">Trigger mouseenter event</button>

</body>
</html>  

OUTPUT-

jQuery Mouse Events

jquery mouseleave() Event

jquery mouseleave() event are used when you leave the mouse in html element.

SYNTAX-

$(selector).mouseleave() 

Attach a function to the mouseleave event:

ParameterDescription
functionIt is an optional parameter. It executes itself when the mouseleave event is triggered.

EXAMPLE- when you leave the text show the “bye bye….leaving heading” with show() and fadeout() method.

<!DOCTYPE html>    
<html>    
<head>    
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>    
<script>    
$(document).ready(function(){    
    $("#P").mouseleave(function(){    
       $( "div" ).text( "Bye Bye... leaving heading" ).show().fadeOut( 2000 );   
    });    
});    
</script>    
</head>    
<body>  
<H1>Jquery events by wearewriter.com</H1>  
<P id="P">Enter this heading.</P>   
<div></div>   
</body>    
</html>

OJUTPUT-

jQuery Mouse Events

Jquery hover() event

The jQuery hover() method executes two functions when you use the mouse pointer over the selected element. The hover() method triggers both the mouseenter and mouseleave events.

SYNTAX-

$(selector).hover(inFunction,outFunction)  

here there is two parameter

  1. inFunction
  2. outFunction
ParameterDescription
InFunctionIt is a mandatory parameter. It is executed the function when mouseenter event occurs.
outFunction
It is an optional parameter. It is executed the function when mouseleave event occurs.

EXAMPLE-

<!DOCTYPE html>  
<html>  
<head>  
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>  
<script>  
$(document).ready(function(){  
    $("p").hover(function(){  
        $(this).css("background-color", "violet");  
        }, function(){  
        $(this).css("background-color", "YELLOW");  
    });  
});  
</script>  
</head>  
<body>  
<H1>Jquery events by wearewriter.com</H1>  
<p style="padding: 20PX;">HOVER EVENT</p>  
</body>  
</html> 

OUTPUT– This “violet” color comes when mouseenter the text

jQuery Mouse Events

This “yellow”t comes when mouseleave the text

jQuery Mouse Events

Thankyou for reading my articles.

Leave a Comment

Show Buttons
Hide Buttons