2

There's a bunch of questions about how to remove all "specific" handlers (e.g. onclick) from elements, or purge all events from an element, etc.

  1. How to remove all Click event handlers in Jquery
  2. Jquery: how to release all event handlers, dom changes?

This question is a bit broader. We were facing huge memory leaks in the asp.net site under IE7 and IE8, and one of the tweaks to shrink those leaks was to unbind all events from all elements on the page. Basically this:

$('*').off();

Now, we're trying to improve the performance of the application and, to no surprise, this particular line is one of the hot spots.

So, the question is: are there any way to achieve the same result (explicitly removing all the handlers from all the elements in the document) more efficiently?

No-go options:

  • "Reload the page" - memory leaks are preserved this way.
  • "Every time you attach a handler you store it in an array" - there are way too much such places

What I was thinking of is to use some jQuery internals (maybe even non-public API) to leverage the detection of element with handlers attached. But it's slightly above my current competency with jQuery. If it helps, we're targeting jQuery 1.7.1.

Community
  • 1
  • 1
J0HN
  • 26,063
  • 5
  • 54
  • 85
  • I have done this before. and my solution was to keep a global array that stores references to elements. So everytime I binded something, I appended a reference to the array. Then, when i needed to, looped through the array and unbind one by one. Its a tedious solution. Would love to know a way to do that better also. – AlexCheuk Mar 21 '13 at 21:33
  • @AlexCheuk, that might be troublesome. I wish we could just traverse all the files that use jQuery and modify handlers attachment to append handlers to some array... But in reality we have a long-living product with those attachments spread throughout hundreds of files. And almost no automated tests. Not even taking into account development effort, our QA team just kill us if we do so :) A global solution is required, brute force is (unfortunately) not an option. – J0HN Mar 22 '13 at 01:26

1 Answers1

1

I suppose you could create something like hasEvent to detect events but I suspect your issue is more traversing the dom than calling .off() on elements that have no events. You could test it to make sure.

Depending on the nature of your application you might gain some performance by tweaking your selector to target your elements more precisely.
See: http://www.artzstudio.com/2009/04/jquery-performance-rules/

Another idea would be to override jQuery functions that add your event handlers so you can populate your array for later use. It wouldn't require modifying your hundreds of files but would still give you more direct access for later manipulation.

Community
  • 1
  • 1
Donald Byrd
  • 7,668
  • 4
  • 33
  • 50
  • Yes, indeed traversing with `$('*')` consumes much more resources than `off()`. Tweaking the selector is already verified, it's almost useless since we have handlers for a, div, span, input, img, li, td, table, tr, etc. - virtually any kind of tag used on the page. Not to mention classes and ids :). Overloading jQuery might do the trick, will try it tomorrow. – J0HN Mar 22 '13 at 02:42