jQuery Browser Events
What You’ll Learn
Browser events let your page react when resources load or fail — broken product photos, missing avatars, and failed media embeds. jQuery’s .on("error") attaches handlers the same way as click or keydown. Start with the error event for failed image loads.
.on()
Bind handlers
error
Load failed
Fallback
Swap src
Before src
Attach first
.trigger()
Fire events
6 guides
Full index
Introduction
Every gallery, e-commerce catalog, and user profile page shows images from URLs that might break — deleted files, CDN outages, or typos in the path. Without an error handler, users see the broken-image icon. With jQuery, you can swap in a placeholder the moment loading fails.
What Are jQuery Browser Events?
Browser events are named strings passed to .on() — "error" when loading fails, and "load" when loading succeeds (on elements like <img>). The handler receives a standard jQuery event object. The legacy .error() shorthand (removed in jQuery 3.0) bound the same event — use .on("error") since jQuery 1.7 in modern code.
Bind .on("error", handler) on <img> elements before setting a broken src. Use a valid fallback URL so the handler does not loop forever. For JavaScript exceptions, use window.onerror — not jQuery on window.
📝 Syntax
Minimal error binding workflow:
$("#book")
.on("error", function() { alert("Handler for error called."); })
.attr("src", "missing.png");
$("img").on("error", function() {
$(this).attr("src", "replacement.png");
});
$("#book").trigger("error");👀 error vs load vs window.onerror vs deprecated .error()
Four related concepts — pick the right tool:
Browser Event Tutorial Index
Search by event name or browse by category. Each tutorial includes syntax, try-it examples, and FAQs.
Resource Loading
2 tutorialsRespond when the browser finishes or fails loading page resources — error on broken images and legacy .error() shorthand.
| Event | Description | Tutorial |
|---|---|---|
error event | Bind a handler or trigger the error event when an image or media element fails to load — attach before setting src and use a valid fallback. | Open |
.error() | Legacy shorthand removed in jQuery 3.0 — bind or trigger the error event; migrate to .on('error') and .trigger('error'). | Open |
Window Size
2 tutorialsReact when the viewport changes — resize fires on window when the user resizes the browser; debounce expensive layout code.
| Event | Description | Tutorial |
|---|---|---|
resize event | Bind a handler or trigger the resize event when the browser window changes size — debounce handlers and read $(window).width(). | Open |
.resize() | Deprecated shorthand since jQuery 3.3 — bind or trigger the resize event on window; migrate to .on('resize') and .trigger('resize'). | Open |
Scrolling
2 tutorialsDetect scroll on window or overflow elements — build sticky headers, progress bars, and infinite-load triggers.
| Event | Description | Tutorial |
|---|---|---|
scroll event | Bind a handler or trigger the scroll event when the user scrolls window or overflow elements — read scrollTop and throttle handlers. | Open |
.scroll() | Deprecated shorthand since jQuery 3.3 — bind or trigger the scroll event; migrate to .on('scroll') and .trigger('scroll'). Not .scrollTop(). | Open |
Conclusion
jQuery browser events help you handle resource loading gracefully. Start with .on("error", handler) on images — attach before setting src, swap to a valid fallback, and avoid binding error on window for script exceptions.
❓ Frequently Asked Questions
Start with error event
Learn .on("error"), image fallbacks, and .trigger("error").
About the author
6 people found this page helpful