jQuery Events
Events are actions on the page, like a click or a key press. jQuery makes it easy to run code when they happen.
Event Methods
jQuery has a short method for most events. You pass the function to run:
Example
$("#btn").click(function () {
// runs when #btn is clicked
});| Method | Runs when |
|---|---|
click() | The element is clicked |
dblclick() | The element is double clicked |
hover(inFn, outFn) | The mouse enters, then leaves |
focus() / blur() | An input gets / loses focus |
keyup() | A key is released in an input |
change() | A select, checkbox or input value changes |
submit() | A form is submitted |
Using this
Inside an event function, this is the element that the event happened on. Wrap it as $(this) to use jQuery methods on it.
Example
<!DOCTYPE html>
<html>
<head>
<script src="https://cdn.jsdelivr.net/npm/jquery@3.7.1/dist/jquery.min.js"></script>
<style>
li { cursor: pointer; padding: 4px; }
.done { text-decoration: line-through; color: gray; }
</style>
</head>
<body>
<h3>Today's tasks (click to finish)</h3>
<ul>
<li>Buy milk</li>
<li>Pay electricity bill</li>
<li>Revise JavaScript lesson</li>
</ul>
<script>
$(function () {
$("li").click(function () {
$(this).toggleClass("done");
});
});
</script>
</body>
</html>One line of code adds the click handler to every <li>, and $(this) changes only the one you clicked.
Hover
hover() takes two functions: one for mouse enter and one for mouse leave.
Example
<!DOCTYPE html>
<html>
<head>
<script src="https://cdn.jsdelivr.net/npm/jquery@3.7.1/dist/jquery.min.js"></script>
</head>
<body>
<p id="card" style="padding:20px;background:#eee;width:220px">Hover to see the price</p>
<script>
$(function () {
$("#card").hover(
function () { $(this).css("background", "#0769ad").css("color", "white").text("Only Rs 1,499"); },
function () { $(this).css("background", "#eee").css("color", "black").text("Hover to see the price"); }
);
});
</script>
</body>
</html>The on() Method
on() is the main way to attach events. It can attach one or several events at once:
Example
$("#name").on("focus", function () {
$(this).css("background", "#fffbe6");
});
$("#box").on("mouseenter mouseleave", function () {
$(this).toggleClass("active");
});off() removes handlers: $("#box").off("click");
Typing and Live Counters
Example
<!DOCTYPE html>
<html>
<head>
<script src="https://cdn.jsdelivr.net/npm/jquery@3.7.1/dist/jquery.min.js"></script>
</head>
<body>
<p>Write a short review (max 100 characters):</p>
<textarea id="review" maxlength="100" rows="3" cols="40"></textarea>
<p id="count">0 / 100</p>
<script>
$(function () {
$("#review").on("input", function () {
$("#count").text($(this).val().length + " / 100");
});
});
</script>
</body>
</html>The Event Object
The function receives an event object with details about the event. event.preventDefault() stops the browser's normal action, such as submitting a form or following a link.
Example
<!DOCTYPE html>
<html>
<head>
<script src="https://cdn.jsdelivr.net/npm/jquery@3.7.1/dist/jquery.min.js"></script>
</head>
<body>
<form id="contact">
<input id="phone" placeholder="03XX-XXXXXXX">
<button type="submit">Send</button>
</form>
<p id="msg"></p>
<script>
$(function () {
$("#contact").on("submit", function (event) {
event.preventDefault();
const phone = $("#phone").val().trim();
if (phone.length < 11) {
$("#msg").text("Please enter a full mobile number.").css("color", "red");
} else {
$("#msg").text("Thank you! We will call " + phone).css("color", "green");
}
});
});
</script>
</body>
</html>Events on New Elements
Handlers attached with $("li").click(...) only work on elements that exist now. For elements you add later, attach the handler to a parent and name the child as the second argument:
Example
$("ul").on("click", "li", function () {
$(this).toggleClass("done");
});This is called event delegation.
Prefer on("click", ...) in new code. The short forms like click(fn) still work, but jQuery's documentation now recommends on().
Exercise
Exercise
Inside $("button").click(function () { ... }), what does $(this) refer to?