Introduction to jQuery Events
What Is an Event
Browsers fire an event object whenever something happens to a page or element -- a click, a keypress, a page load -- and jQuery lets you listen for it. jQuery's event system smooths over small inconsistencies between browsers so you can write one handler that works everywhere.
Example: What Is an Event
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
</head>
<body>
<button id="btn">Click</button>
<script>
$("#btn").on("click", function(event) {
console.log("Event fired:", event.type);
});
</script>
</body>
</html>Bind an Event
Attaching a handler with .on(click, function(){...}) tells the browser to run your function every time that specific event fires on the selected element, instead of running it immediately.
Example: Bind an Event
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
</head>
<body>
<button id="btn">Click</button>
<script>
$("#btn").on("click", function() {
console.log("Clicked");
});
</script>
</body>
</html>Click Events
Click events fire the moment the user presses and releases the mouse button over an element, making them the most common event used for buttons, links, and interactive UI controls.
Example: Click Events
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
</head>
<body>
<button id="btn">Press</button>
<script>
$("#btn").on("click", function() {
console.log("Button pressed and released");
});
</script>
</body>
</html>Multiple Events
A single element can listen for several different event types at once -- for example both mouseenter and click -- each with its own handler function reacting independently. Each handler runs completely independently, so a click handler firing doesn't affect whether a separate mouseenter handler also fires.
Example: Multiple Events
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
</head>
<body>
<div id="box">Hover or click</div>
<script>
$("#box").on("mouseenter", function() {
console.log("Mouse entered");
});
$("#box").on("click", function() {
console.log("Box clicked");
});
</script>
</body>
</html>Event Handler Function
The function passed to an event handler receives an event object as its argument, which carries useful details like which element triggered it and, for keyboard events, exactly which key was pressed.
Example: Event Handler Function
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
</head>
<body>
<input id="field">
<script>
$("#field").on("keydown", function(event) {
console.log("Target:", event.target.id, "Key:", event.key);
});
</script>
</body>
</html>Chapter Quiz — Complete all 11 topics to unlock
0/11 topics done
Complete these topics first: