jQuery Browser Events

Beginner
6 min read
Updated: Nov 2026
6 method guides
Method index
jQuery Browser Events index — error, resize, and scroll with .on()
Index

About This Index

This page is the jQuery Browser Events index for the tutorial track. Each row links to a full guide with syntax, examples, and FAQs.

Learn the jQuery overview on /jquery. Use this page when you need a browser event such as error, resize, or scroll.

Beginner path.

Start with error for broken images, then resize and scroll—prefer .on() over the legacy shorthands.

Syntax

How to Call a Browser Event

Bind with .on() and fire with .trigger()—same pattern as click or keydown:

jQuery
$("img").on("error", function () {
  $(this).attr("src", "/images/fallback.png");
});

$(window).on("resize", function () {
  console.log($(window).width());
});

$(window).on("scroll", function () {
  console.log($(this).scrollTop());
});

$(window).trigger("resize");
$(window).trigger("scroll");
Browse

jQuery Browser Events Table

All Browser Events guides in this jQuery tutorial series (6 tutorials).

Resource Loading

2 methods

Respond when a page resource fails — error on broken images, plus the legacy .error() shorthand.

MethodDescriptionTutorial
errorBind or trigger when an image or media element fails to load — attach before setting src and use a valid fallback.Try it
.error()Legacy shorthand removed in jQuery 3.0 — migrate to .on('error') and .trigger('error').Try it

Window Size

2 methods

React when the viewport changes — resize on window; debounce expensive layout work.

MethodDescriptionTutorial
resizeBind or trigger when the browser window changes size — debounce handlers and read $(window).width().Try it
.resize()Deprecated since jQuery 3.3 — migrate to .on('resize') and .trigger('resize') on window.Try it

Scrolling

2 methods

Detect scroll on window or overflow elements — sticky headers, progress bars, and infinite load.

MethodDescriptionTutorial
scrollBind or trigger when window or overflow elements scroll — read scrollTop and throttle handlers.Try it
.scroll()Deprecated since jQuery 3.3 — migrate to .on('scroll') and .trigger('scroll'). Not .scrollTop().Try it

Frequently Asked Questions

They cover window and resource lifecycle: error when an image fails to load, resize when the viewport changes size, and scroll when window or overflow elements move. Bind them with .on() like other jQuery events.
Prefer .on('resize', handler) and .trigger('resize'). The .resize(), .scroll(), and .error() shorthands are deprecated or removed in modern jQuery—migrate to the .on() / .trigger() forms.
No. Element error (broken images) is different from window script errors. Use window.onerror or addEventListener('error', ...) for uncaught exceptions—not $(window).on('error').
Bind before setting src, then swap to a known-good fallback URL. Use .one('error') or remove the handler after the swap so a bad fallback cannot retrigger forever.
Start with the error event for broken images, then resize and scroll. Prefer .on() bindings over the legacy shorthands.

Start with error

Open the error event guide—syntax, examples, and FAQs.

error tutorial →

About the author

Mari Selvan M P
Mari Selvan M P 🔗

Developer, cloud engineer, and technical writer

  • Experience 12 years building web and cloud systems
  • Focus Full Stack Development, AWS, and Developer Education

I write practical tutorials so students and working developers can learn by doing—from databases and APIs to deployment on AWS.

AWS Certified Developer – Associate (Credly)

16 people found this page helpful

jQuery .keyup() Method jQuery Error Event