EDUCATION
BMR AI can make mistakes. Check important info. Terms and conditions and
Privacy Policy
Welcome to our BMR AI CHATBOT.
A free expermental AI tool where you can interact with the webpage, ask question about the webpage and other related doubts.
In some cases reponses may take time to get. In case of error give us your report.
You responses are stored for experimental purpuses. And your personal info is not integrated with you in any way.
Note: AI can make mistakes and can give in appropiate responses. Your feedbak will help us improve.
Stay tuned for more AI products and tools
And Finally don't forget to give your feedback. click on the icon provided to give feedback.
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.
<!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.