In this article of Jquery we will learn about Event so Let's start.
@{
ViewBag.Title = "Events";
}
<h2>
Events
</h2>
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="~/js/Event.js" type="text/javascript"></script>
</head>
<body>
<!--The function is executed when the user double-clicks on the HTML element:-->
<h3>The function is executed when the user double-clicks on the HTML element:</h3>
<p>This is para</p>
<p>Second para</p>
<p>Third para</p>
<!--End-->
<br /><br /><br /><br /><br /><br />
<!--The function is executed when the mouse pointer enters the HTML element:-->
<h3>The function is executed when the mouse pointer enters the HTML element:</h3>
<p id="para1">This is para</p>
<!--End-->
<br /><br /><br /><br /><br /><br />
<!--The function is executed when the mouse pointer leaves the HTML element:-->
<h3>The function is executed when the mouse pointer leaves the HTML element:</h3>
<p id="mouseLeave">This is para</p>
<!--End-->
<br /><br /><br /><br /><br /><br />
<!--The function is executed, when the left, middle or right mouse button is pressed down, while the mouse is over the HTML element:-->
<h3>The function is executed, when the left, middle or right mouse button is pressed down, while the mouse is over the HTML element:</h3>
<p id="mouseDown">This is para</p>
<!--End-->
<br /><br /><br /><br /><br /><br />
<!--The function is executed when the form field gets focus:-->
<h3>The function is executed when the form field gets focus:</h3>
<input type="text" />
<input type="text" />
<!--End-->
<script>
$(document).ready(function () {
$("p").dblclick(function () {
$(this).hide();
});
$("#para1").mouseenter(function () {
alert("This is para")
});
$("#mouseLeave").mouseleave(function () {
alert("You are leaving para")
});
$("#mouseDown").mousedown(function () {
alert("This is para")
});
$("input").focus(function () {
$(this).css("background-color","white")
});
$("input").blur(function () {
$(this).css("background-color","lightgrey")
});
});
</script>
</body>
</html>
Comments
Post a Comment