title: Browser Memory Usage Comparison: inline onClick vs. using JQuery .bind()
body: <p>I have ~400 elements on a page that have click events tied to them (4 different types of buttons with 100 instances of each, each type's click events performing the same function but with different parameters).  </p>
  
  <p>I need to minimize any impacts on performance that this may have.  What kind of performance hit am I taking (memory etc) by binding click events to each of these individually (using JQuery's <code>bind()</code>)?  Would it be more efficient to have an inline <code>onclick</code> calling the function on each button instead?</p>
  
  <p><strong>Edit for clarification :):</strong><br>
  I actually have a table (generated using JQGrid) and each row has data columns followed by 4 icon 'button' columns- delete &amp; three other business functions that make AJAX calls back to the server: </p>
  
  <pre>
  |id|description|__more data_|_X__|_+__|____|____|
  -------------------------------------------------
  | 1|___data____|____data____|icon|icon|icon|icon|  
  | 2|___data____|____data____|icon|icon|icon|icon|   
  | 3|___data____|____data____|icon|icon|icon|icon|   
  | 4|___data____|____data____|icon|icon|icon|icon|    
  </pre>
  
  <p>I am using JQGrid's custom formatter (<a href="http://www.trirand.com/jqgridwsiki/doku.php?id=wiki:custom_formatter" rel="noreferrer">http://www.trirand.com/jqgridwsiki/doku.php?id=wiki:custom_formatter</a>) to build the icon 'buttons' in each row (I cannot retrieve button HTML from server).    </p>
  
  <p>It is here in my custom formatter function that I can easily just build the icon HTML and code in an inline <code>onclick</code> calling the appropriate functions with the appropriate parameters (data from other columns in that row).  I use the data in the row columns as parameters for my functions.</p>
  
  <pre><code>    function removeFormatter(cellvalue, options, rowObject) {       
          return "&lt;img src='img/favoritesAdd.gif' onclick='remove(\"" + options.rowId + "\")' title='Remove' style='cursor:pointer' /&gt;";
      }
  </code></pre>
  
  <p>So, I can think of two options:<br>
  1) inline <code>onclick</code> as I explained above<br>
   --or--<br>
  2) <code>delegate()</code> (as mentioned in below answers (thank you so much!))</p>
  
  <ol><li>Build the icon image (each icon type has its own class name) using the <a href="http://www.trirand.com/jqgridwsiki/doku.php?id=wiki:custom_formatter" rel="noreferrer">custom formatter</a>.</li><li>Set the icon's <code>data()</code> to its parameters in the <a href="http://www.trirand.com/jqgridwiki/doku.php?id=wiki:events" rel="noreferrer">afterInsertRow</a> JQGrid event.  </li><li>Apply the <code>delegate()</code> handler to buttons of specific classes (as @KenRedler said below)   </li></ol>  
  
  <pre><code>&gt;    $('#container').delegate('.your_buttons','click',function(e){  
  &gt;      e.preventDefault();  
  &gt;      var your_param = $(this).data('something'); // store your params in data, perhaps  
  &gt;      do_something_with( your_param );  
  &gt;    }); //(code snippet via @KenRedler)
  </code></pre>
  
  <p>I'm not sure how browser-intensive option #2 is I guess...but I do like keeping the Javascript away from my DOM elements :)</p>