Events in JQuery are used to create a moving web page. Events are such actions. Which can be detected by your web application. When these events start, you can use as many custom functions as you want with the events. These custom tasks call the events handlers
Through jQuery Events you can create your web page in such a way that whenever a user action is performed, there are changes in the web page accordingly. The main job of Events is to make the page interactive and dynamic.
Whenever a visitor performs an action and replies to the web page, it is called events.
For example, where and where events can be used:
Whenever you move the mouse over that element, changes occur in web pages.If you click on an element, then changes come in the web page.
Whenever you press a key in the keyboard, events are still used.
$(document).ready() :- The $(document).ready() method allows us to execute a function when the document is fully loaded.
click – Event will be performed when you mouse-click on an element.
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("p").click(function(){
$(this).hide();
});
});
</script>
</head>
<body>
<p>Click Me And I will Hide!</p>
<p>Click Me And I will Hide!</p>
<p>Click Me And I will Hide!</p>
</body>
</html>
dblclick – When you double click with an mouse on an element, the event will perform.
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("p").dblclick(function(){
$(this).hide();
});
});
</script>
</head>
<body>
<p>double-click on Experts PHP</p>
<p>Click On Experts PHP!</p>
<p>Click me too!</p>
</body>
</html>
mouseenter – The event will be performed as soon as you enter the mouse’s curser into the element.
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("#mouse").mouseenter(function(){
alert("You entered on Mouse.");
});
});
</script>
</head>
<body>
<p id="mouse">Enter this paragraph.</p>
</body>
</html>
mousedown() Event Function Use
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("#mousedown").mousedown(function(){
alert("Mouse down over mousedown!");
});
});
</script>
</head>
<body>
<p id="mousedown">This is a paragraph.</p>
</body>
</html>
mouseup() Event Function Use
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("#up").mouseup(function(){
alert("Mouse up over up!");
});
});
</script>
</head>
<body>
<p id="up">This is a paragraph.</p>
</body>
</html>
hover() Event Function Use
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("#hover").hover(function(){
alert("You entered hover!");
},
function(){
alert("Bye! You now leave hover!");
});
});
</script>
</head>
<body>
<p id="hover">This is a paragraph.</p>
</body>
</html>