When user interats with the web page an event is generated.
In other words events are actions or occurrences that happen on a web page.
In jOuery handling events is easy as they are simplified.
Here are the selector types and its syntax in jQuery
Event Type
Example
Description
Click Event
$("button").click(function(){ /* code */ });
Triggered when a user clicks on an element.
Double Click Event
$("p").dblclick(function(){ /* code */ });
Triggered when a user double-clicks on an element.
Mouse Enter Event
$("div").mouseenter(function(){ /* code */ });
Triggered when the mouse pointer enters an element.
Mouse Leave Event
$("div").mouseleave(function(){ /* code */ });
Triggered when the mouse pointer leaves an element.
Hover Event
$("button").hover(function(){ /* mouse enter code */ }, function(){ /* mouse leave code */ });
Combines mouse enter and mouse leave events.
Key Press Event
$(document).keypress(function(event){ /* code */ });
Triggered when a key is pressed.
Submit Event
$("form").submit(function(){ /* code */ });
Triggered when a form is submitted.
Change Event
$("input").change(function(){ /* code */ });
Triggered when the value of an input changes.
Resize Event
$(window).resize(function(){ /* code */ });
Triggered when the window is resized.
Scroll Event
$(window).scroll(function(){ /* code */ });
Triggered when the user scrolls.
EDUCATION
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>jQuery Events Example</title>
<!-- Include jQuery from a CDN -->
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<style>
div {
width: 100px;
height: 100px;
background-color: lightblue;
margin: 10px;
text-align: center;
line-height: 100px;
cursor: pointer;
}
</style>
</head>
<body>
<h1>jQuery Events Example</h1>
<button id="clickBtn">Click Me</button>
<p id="dblClickPara">Double Click Me</p>
<div id="mouseEnterDiv">Mouse Enter</div>
<form id="submitForm">
<label for="textInput">Type Something:</label>
<input type="text" id="textInput">
<input type="submit" value="Submit">
</form>
<script>
// Click Event
$("#clickBtn").click(function(){
alert("Button Clicked!");
});
// Double Click Event
$("#dblClickPara").dblclick(function(){
alert("Paragraph Double Clicked!");
});
// Mouse Enter Event
$("#mouseEnterDiv").mouseenter(function(){
$(this).css("background-color", "lightgreen");
});
// Mouse Leave Event
$("#mouseEnterDiv").mouseleave(function(){
$(this).css("background-color", "lightblue");
});
// Submit Event
$("#submitForm").submit(function(event){
event.preventDefault();
alert("Form Submitted!");
});
</script>
</body>
</html>
The Concepts and codes you leart practice in Compilers till you are confident of doing on your own. A Various methods of examples, concepts, codes availble in our websites. Don't know where to start Down some code examples are given for this page topic use the code and compiler.
