jQuery Events
Events let your page react to user actions and browser changes. With jQuery you attach handlers, inspect the event object, stop defaults/propagation, delegate to future elements, trigger custom events, and more.
Quick Reference
| Method / Event | Description | Example |
|---|---|---|
.on(type, [sel], handler) | Attach handler; optional selector enables delegation. | $(ul).on('click', 'li', fn) |
.one(), .off() | Run only once; remove handlers. | $('#b').one('click', fn), $(doc).off('click') |
Mouse: click, mouseenter, mousemove, mouseleave | Pointer interactions. | $('#box').on('mousemove', fn) |
Keyboard: keydown, keyup | Read e.key/e.which. | $('#t').on('keydown', e => ...) |
Focus: focus, blur | Enter/leave input focus. | $('#t').on('focus', fn) |
Change & input | input fires on each keystroke; change on commit. | $('#t').on('input', fn) |
Form: submit | Intercept submission; validate or AJAX. | $('#f').on('submit', e => e.preventDefault()) |
Event object e | Info like e.type, coords, target, keys. | $('#box').on('click', e => ...) |
e.preventDefault() / e.stopPropagation() | Block default / stop bubbling. | $('#lnk').on('click', e => e.preventDefault()) |
Custom: trigger() | Fire your own events with data. | $(doc).trigger('app:ready', [data]) |
Ready: $(fn) | Run when DOM is ready. | $(function(){ ... }) |
Window: scroll, resize | React to viewport changes (throttle). | $(win).on('scroll resize', fn) |
Tip: Prefer
.on() with delegation for dynamic lists/grids ($(parent).on('click', 'li.item', fn)). It binds once on the parent and works for future items.2) Mouse Events
$('#box').on('mouseenter mousemove mouseleave', function(e){ ... });
7) Event Object + preventDefault / stopPropagation
$('#lnk').on('click', function(e){
e.preventDefault(); // don't follow link
});
9) on() / one() / off()
$('#b').one('click', function(){ ... }); // once
$(document).on('click', fn);
$(document).off('click', fn);
10) Custom Events & trigger()
$(document).on('app:ready', function(e, data){ ... });
$(document).trigger('app:ready', [{ user: 'Sonu' }]);
11) DOM Ready & Window Events
$(function(){ // DOM ready ... });
$(window).on('scroll resize', function(){ ... });
Debugging: Log the
event object and this inside handlers to understand context. For performance, throttle high-frequency events like scroll and resize.