jQuery Events
Mouse Events
jQuery provides easy methods for handling mouse events like click(), dblclick(), hover(), mouseenter(), and mouseleave().
Example: click() and dblclick()
<button id="clickExampleBtn">Click Me</button>
<p id="clickExampleOutput"></p>
<script>
$(document).ready(function() {
$("#clickExampleBtn").click(function() {
$("#clickExampleOutput").text("Button clicked!");
});
$("#clickExampleBtn").dblclick(function() {
$("#clickExampleOutput").text("Button double-clicked!");
});
});
</script>
Output:
Example: hover(), mouseenter(), mouseleave()
<div id="hoverBox" style="width:200px;height:100px;background:#ccc;">Hover over me</div>
<p id="hoverText"></p>
<script>
$(document).ready(function() {
$("#hoverBox").hover(
function() {
$("#hoverText").text("You're hovering!");
},
function() {
$("#hoverText").text("Mouse left!");
}
);
});
</script>
Output:
Hover over me
Keyboard Events
Use keydown(), keyup(), and keypress() to detect user key interactions.
Example:
<input type="text" id="keyInputBox" placeholder="Type something...">
<p id="keyOutputText"></p>
<script>
$(document).ready(function() {
$("#keyInputBox").keydown(function() {
$("#keyOutputText").text("Key down");
});
$("#keyInputBox").keyup(function() {
$("#keyOutputText").text("Key released");
});
});
</script>
Output:
Form Events
Handle input and form events using focus(), blur(), submit(), and change().
Example: focus(), blur(), change()
<input type="text" id="focusInput" placeholder="Your name">
<select id="dropdownList">
<option>Select</option>
<option>Option 1</option>
<option>Option 2</option>
</select>
<p id="formMessage"></p>
<script>
$(document).ready(function() {
$("#focusInput").focus(function() {
$("#formMessage").text("Input focused");
}).blur(function() {
$("#formMessage").text("Input lost focus");
});
$("#dropdownList").change(function() {
$("#formMessage").text("Changed to: " + $(this).val());
});
});
</script>
Output:
Example: submit()
<form id="submitForm">
<input type="text" placeholder="Enter something">
<button type="submit">Submit</button>
</form>
<p id="submitResultText"></p>
<script>
$(document).ready(function() {
$("#submitForm").submit(function(event) {
event.preventDefault();
$("#submitResultText").text("Form submitted!");
});
});
</script>
Output:
Event Delegation with .on()
Use .on() to handle events for dynamically added elements.
Example:
<ul id="eventList">
<li>Item 1</li>
</ul>
<button id="addListItem">Add Item</button>
<script>
$(document).ready(function() {
$("#eventList").on("click", "li", function() {
alert("Clicked: " + $(this).text());
});
$("#addListItem").click(function() {
$("#eventList").append("<li>New Item</li>");
});
});
</script>
Output:
- Item 1
If you have any questions, feel free to ask. Thank you for reading!
If you have any query or question, please contact through below form. Our team will be in touch with you soon.
Please provide your valueable feedback or suggession as well.