jQuery Events- Handling Mouse Actions in Webpages

Web pages can be made interactive and attractive using jQuery Events fired on HTML elements. In this article we will understand various jQuery Events that are raised by user interaction using mouse. Mouse can be used to click, doubleclick, moveover , enter or leave the HTML elements. These elements can be div, buttons, textboxes, paragraphs, lists etc.

Common jQuery Events for Mouse Actions

Mouseover

Mouseover event is fired when the mouse is placed over an HTML element. This method can be used to change the appearance of the element so that the user gets attention.

<!DOCTYPE html>
<html>
<head>
<!--style sheet for how to create calculator program-->
<style>
.ui {
  background-color:powderblue;
  width:100px;
  height:100px;
  border-style:solid;
  border-width:2px;
  padding:10px;
  text-align:center;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$(".ui").mouseover(function(){
    $(this).css("background-color","#FFC300");	
  });
});
</script>	
</head>
<div class="ui">
Test Mouse Events Here
</div>
</HTML>

MouseEnter

This event is fired when the mouse pointer enters an HTML element as a user moves the mouse. You can change the text style or color of the element with this method associated with jQuery event.

<!DOCTYPE html>
<html>
<head>
<!--style sheet for how to create calculator program-->
<style>
.ui {
  background-color:powderblue;
  width:100px;
  height:100px;
  border-style:solid;
  border-width:2px;
  padding:10px;
  text-align:center;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$(".ui").mouseenter(function(){
    $(this).css("background-color","#44BF3A");	
  });
});
</script>	
</head>
<div class="ui">
Test Mouse Events Here
</div>
</HTML>

Mouseleave

This jQuery event is fired when the mouse pointer leaves an HTML element. It works only when a user moves the mouse cursor from an element to some other element or blank space.

<!DOCTYPE html>
<html>
<head>
<!--style sheet for how to create calculator program-->
<style>
.ui {
  background-color:powderblue;
  width:100px;
  height:100px;
  border-style:solid;
  border-width:2px;
  padding:10px;
  text-align:center;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$(".ui").mouseleave(function(){
    $(this).css("background-color","#C45FC3");	
  });
});
</script>	
</head>
<div class="ui">
Test Mouse Events Here
</div>
</HTML>

Mousedown

This event is fired when the left button on the mouse is pressed down while resting the mouse cursor on an HTML element. The associated method can be used to initiate some activity or evaluation of some expression.

<!DOCTYPE html>
<html>
<head>
<!--style sheet for how to create calculator program-->
<style>
.ui {
  background-color:powderblue;
  width:100px;
  height:100px;
  border-style:solid;
  border-width:2px;
  padding:10px;
  text-align:center;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$(".ui").mousedown(function(){
    $(this).css("background-color","#C45F76");	
  });
});
</script>	
</head>
<div class="ui">
Test Mouse Events Here
</div>
</HTML>

Mouseup

Mouseup is fired when the mouse left button is released after resting the mouse cursor an HTML element. The related method can be used to reset the color or text or value of another element.

<!DOCTYPE html>
<html>
<head>
<!--style sheet for how to create calculator program-->
<style>
.ui {
  background-color:powderblue;
  width:100px;
  height:100px;
  border-style:solid;
  border-width:2px;
  padding:10px;
  text-align:center;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$(".ui").mouseup(function(){
    $(this).css("background-color","#85C45F");	
  });
});
</script>	
</head>
<div class="ui">
Test Mouse Events Here
</div>
</HTML>

Dblclick

jQuery event is fired when the mouse is double clicked as the mouse cursor is resting on an HTML element.

<!DOCTYPE html>
<html>
<head>
<!--style sheet for how to create calculator program-->
<style>
.ui {
  background-color:powderblue;
  width:100px;
  height:100px;
  border-style:solid;
  border-width:2px;
  padding:10px;
  text-align:center;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$(".ui").dblclick(function(){
    $(this).css("background-color","red");	
  });
});
</script>	
</head>
<div class="ui">
Test Mouse Events Here
</div>
</HTML>

Click

This event is fired when the mouse is left clicked as the user keeps the mouse cursor on an HTML element. It is the most commonly used event to make interactive web sites and applications. It’s the same as combination of Mousedown and Mouseup events fired in sequence.

<!DOCTYPE html>
<html>
<head>
<!--style sheet for how to create calculator program-->
<style>
.ui {
  background-color:powderblue;
  width:100px;
  height:100px;
  border-style:solid;
  border-width:2px;
  padding:10px;
  text-align:center;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$(".ui").click(function(){
    $(this).css("background-color","#FF5733");	
  });
});
</script>	
</head>
<div class="ui">
Test Mouse Events Here
</div>
</HTML>

Hover

Among jQuery events, this event is fired when the mouse enters and exits an HTML element. It also equals the sequential firing of mouseenter and mouseleave events. The hover method requires two functions as parameters. The first is exected when mouse cursor enters the element and second when mouse cursor leaves the element.

<!DOCTYPE html>
<html>
<head>
<!--style sheet for how to create calculator program-->
<style>
.ui {
  background-color:powderblue;
  width:100px;
  height:100px;
  border-style:solid;
  border-width:2px;
  padding:10px;
  text-align:center;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$(".ui").hover(function(){
    $(this).css("background-color","#0AF727");	
  },
  function(){
  $(this).css("background-color","powderblue");	
});
});
</script>	
</head>
<div class="ui">
Test Mouse Events Here
</div>
</HTML>

jQuery events are the tools to make interactive webpages to attract users.

admin