Events are the heart of web interactivity. They represent every action a user takes on your website — whether it's moving the mouse, clicking a button, or typing into a form. jQuery makes it incredibly simple to listen for these actions and respond to them with custom code.
An event represents the precise moment when something happens. In web development, we say that an event "fires" or "triggers." For example:
Events in jQuery are typically grouped into four main categories. Here are the most frequently used methods for each:
In jQuery, most events have a specific method name. To "attach" an event to an element, you use the following syntax:
$(selector).eventMethod(function() {
// Code to execute when the event happens
});For example, to hide all paragraphs when they are clicked:
$("p").click(function() {
$(this).hide();
});$(this) refers to the specific element that triggered the event. This is
extremely useful when applying actions to one specific item in a list.
You can also use the on() method to attach one or more event handlers for
the selected elements. This is the modern and preferred approach for complex
interactions.
$("p").on({
mouseenter: function() {
$(this).css("background-color", "lightgray");
},
mouseleave: function() {
$(this).css("background-color", "white");
},
click: function() {
$(this).css("background-color", "yellow");
}
});The click() method attaches a function to run when the user clicks on an
HTML element.
The dblclick() method triggers when the user double-clicks on an element.
These fire when the mouse pointer enters or leaves the element's area. They are often used to create "hover" effects without using CSS.
The hover() method takes two functions and is a combination of
mouseenter() and mouseleave().
$("#target").hover(
function() { alert("You entered!"); },
function() { alert("You left!"); }
);$(document).ready().$(this) keyword is your best friend for targeting triggered
elements.on() for attaching multiple events or working with dynamic content.
.click() binding won't attach to it. Use .on() with delegated syntax instead: $(document).on("click", ".new-item", handler).
this with $(this). Inside an event handler, this is a raw DOM element — it doesn't have jQuery methods like .hide() until you wrap it: $(this).hide().
.click() calls expecting them to replace each other. Each call adds another handler rather than replacing the previous one — all of them will fire. Use .off("click") first if you need to remove an existing handler.
A second example showing why .on() with delegation matters — clicking a button adds a new list item that is still clickable, even though it didn't exist when the page loaded:
<ul id="list">
<li>Original item</li>
</ul>
<button id="addBtn">Add Item</button>
<script>
$(function() {
$("#addBtn").click(function() {
$("#list").append("<li>New item</li>");
});
// Delegated handler -- works on items added later too
$("#list").on("click", "li", function() {
$(this).css("color", "red");
});
});
</script>Q: What's the difference between .click() and .on("click", ...)?
A: Functionally similar for existing elements, but .on() supports event delegation, letting a handler respond to elements added to the page after the handler was registered.
Q: How do I stop an event from bubbling up to parent elements?
A: Call event.stopPropagation() inside the handler, after accepting event as the callback's first parameter.
Q: What other events besides click can I listen for?
A: Dozens — see the jQuery Events API reference for the full list, including form, keyboard, and custom events.