Events

Responding to User Actions

Events are the bridge between the page and the user. jQuery normalizes them across browsers and lets you attach handlers with one method.

Common Event Methods

$('#btn').click(function () { ... });
$('#input').keyup(function () { ... });
$('#form').submit(function (e) { e.preventDefault(); ... });
$('a').mouseenter(function () { ... });
$('#field').change(function () { ... });

The Event Object

$('a').click(function (event) {
  event.preventDefault();               // stop navigation
  event.stopPropagation();              // stop bubbling
  console.log(event.target, event.type);
});

Using .on() for Everything

$('#list').on('click', 'li', function () {
  alert('You clicked ' + $(this).text());
});

The delegation form with a selector argument catches clicks on current and future children - ideal for dynamically added rows.

Removing and Triggering Events

$('#btn').off('click');              // remove handlers
$('#btn').trigger('click');           // fire manually
$('#btn').trigger('custom:refresh');  // custom events work too

Document Ready

$(function () {
  // safe to touch the DOM here - shorthand for ready()
});

Key Points

• event.preventDefault stops default browser behaviour.
• Delegated .on(events, selector, handler) handles dynamic DOM.
• $(this) inside a handler refers to the clicked element.
• Custom events let components announce state changes.