Roadmap › jQuery › Module: Basics
Lessons in this course (10)

4. Events and event delegation

Basic★ Must knowLesson 4 of 10
js
$("#save").on("click", function (e) {
  e.preventDefault();
  $(this).prop("disabled", true);          // 'this' = the DOM element
});

// Delegation: handler on a static parent, works for rows added later
$("#ordersTable").on("click", ".delete-btn", function () {
  const id = $(this).closest("tr").data("id");
  deleteOrder(id);
});

$("#search").on("input", debounce(function () { search($(this).val()); }, 300));
$("#name").on("keyup change", handler);    // multiple events
$("#btn").one("click", handler);           // runs once
$("#btn").off("click");                    // remove handlers
$(".item").on("click.analytics", track);   // namespaced event
$(".item").off(".analytics");              // remove only namespaced handlers
$("#form").trigger("submit");              // trigger programmatically

Old APIs: .bind(), .delegate(), .live() (removed in 1.9) → all replaced by .on(). return false in a jQuery handler = preventDefault() + stopPropagation().