Events

Introduction

Events are how a page reacts to the user. jQuery gives you a single, consistent way to attach handlers across all browsers. The modern approach centers on the .on() method, which can also delegate — handle events for elements added to the page later.

Theory

Attaching handlers

• Shortcut methods: .click(), .dblclick(), .mouseenter(), .keyup(), etc.
• The general method: .on('click', handler) — preferred, because it also supports delegation and multiple events.
• Remove handlers with .off('click').

The event object

Your handler receives an event object: e.type, e.target (the actual element clicked), e.preventDefault(), and e.stopPropagation(). Inside the handler, this (and $(this)) refers to the element the handler is bound to.

Event delegation

Bind to a stable parent and pass a child selector as the second argument. jQuery checks, when the event bubbles up, whether it originated from a matching child:

// handles clicks on current AND future .item elements
$('#list').on('click', '.item', function (e) {
  $(this).toggleClass('selected');
});

This is essential for dynamic content — elements added after page load are still handled, with just one listener.

Real World Example

Click "Add item" to insert new list items, then click any item (old or new) to toggle it. The toggle works on new items because of delegation:

$('#addBtn').on('click', function () {
  $('<li class="item"></li>').text('Item ' + n).appendTo('#todo');
});
// delegated — covers items added later:
$('#todo').on('click', '.item', function () {
  $(this).toggleClass('done');
});

Common Mistakes

• Binding directly to elements that don't exist yet. $('.item').on('click', ...) only covers items present when the code runs — use delegation for dynamic ones.
• Forgetting e.preventDefault(). Links and form submits fire their default action unless you stop it.
• Confusing e.target with this. this is the bound element; e.target is the deepest element actually clicked.
• Double-binding. Calling .on() repeatedly without .off() attaches multiple handlers, firing several times.

Best Practices

• Prefer .on() over the shortcut methods — it's more flexible and future-proof.
• Use delegation for lists and any content created at runtime.
• Bind delegated handlers to the nearest stable parent, not document, for performance.
• Use $(this) inside handlers to act on the element that triggered the event.

Practice Exercise

1. Add a button and attach a click handler with .on('click', ...) that changes its own text.
2. Add a list and a "Add" button that appends new items.
3. Use a delegated handler so clicking any item (including new ones) toggles a class.
4. Log e.target and this to see the difference.

Assignment

Build a clickable tag manager:

1. An input and an "Add tag" button that appends a new tag element to a container.
2. A delegated click handler on the container: clicking a tag removes it (.remove()).
3. Use e.preventDefault() if you wrap the input in a form to stop page reloads.
4. Display tag text with .text() so input stays XSS-safe.

Interview Questions

• Why prefer .on() over .click()? — .on() supports delegation, multiple events, and namespacing; the shortcuts don't.
• What is event delegation? — Binding a handler to a parent and filtering by a child selector, so events from current and future children are handled by one listener.
• What does $(this) refer to in a handler? — The element the handler is acting on (wrapped as a jQuery object).
• How do you stop a link's default navigation? — Call e.preventDefault() in the handler.
• How do you remove an event handler? — With .off().

Additional Resources

• api.jquery.com/on — the .on() reference
• learn.jquery.com/events — the official events guide
• api.jquery.com/category/events — all event methods