title: Does jQuery's event-handling cause memory leaks?
body: <p>I was reading up on <em>memory leaks</em> because my site's memory keeps piling up, when I came across this article from IBM:</p>
  
  <p><a href="http://www.ibm.com/developerworks/web/library/wa-memleak/#N10116" rel="nofollow noreferrer">http://www.ibm.com/developerworks/web/library/wa-memleak/#N10116</a></p>
  
  <blockquote>
    <p><strong>Closures and circular references</strong><br>
    In Listing 5 you see a closure in which a JavaScript object (obj) contains a reference to a DOM object (referenced by the id "element"). The DOM element, in turn, has a reference to the JavaScript obj. The resulting circular reference between the JavaScript object and the DOM object causes a memory leak.</p>
    
    <p>Listing 5. Event handling memory leak pattern:</p>
  </blockquote>
  
  <pre><code>&lt;html&gt;
  &lt;body&gt;
  &lt;script type="text/javascript"&gt;
  document.write("Program to illustrate memory leak via closure");
  window.onload=function outerFunction(){
      var obj = document.getElementById("element");
      obj.onclick=function innerFunction(){
      alert("Hi! I will leak");
      };
      obj.bigString=new Array(1000).join(new Array(2000).join("XXXXX"));
      // This is used to make the leak significant
  };
  &lt;/script&gt;
  &lt;button id="element"&gt;Click Me&lt;/button&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>One solution they give, is setting <code>obj</code> to <code>null</code> at the end of the <code>onload-function</code>.</p>
  
  <p><em>(see <a href="https://stackoverflow.com/q/15496585/3407923">Can someone explain this javascript memory leak scenario to me</a> for an explanation on why this creates a memory leak)</em></p>
  
  <hr>
  
  <p>Now, I may very well be missing something here, hence the question, but isn't this also what happens when you add a jQuery event-handler:</p>
  
  <pre><code>&lt;html&gt;
  &lt;body&gt;
  &lt;script type="text/javascript"&gt;
  $(window).load(function() {
      $("element").on("click",function() {
          alert("Will this also leak?");
      });
  };
  &lt;/script&gt;
  &lt;button id="element"&gt;Click Me&lt;/button&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>You have basically the same <code>click-handler</code> inside the <code>window.load-function</code>, right?<br>
  I know you don't create a <code>var obj</code>, but the code still creates a <em>jQuery object</em>.</p>
  
  <p>Am I really adding a memory-leak with every jQuery-handler I add?<br>
  Or am I completely misunderstanding these two situations?</p>