refactoring javascript event handlers - is this a reasonable thing to do?
<p>I have inherited a relatively big javascript app (~3k lines of code) and just do parttime javascript. I want to put all the jQuery event handlers into a more sane organization. I was thinking something like this:</p>

<p>before:</p>

<pre><code>$('#click-here').click(function(){
  //a bunch of dom manipulations and with 30 of them makes the app fairly convoluted
});
</code></pre>

<p>after:</p>

<pre><code>function result_click(){
  var global_id=$(this).data('global-id');
  alert('here are the results of clicking: ' + global_id);
}

$(document).ready(function(){
  $('#click-here').on('click',result_click);
});
&lt;/script&gt;
&lt;div id='click-here' data-global-id='23'&gt;click HERE!&lt;/div&gt;
</code></pre>

<p>This would be a fairly easy refactoring and would seem to structure it better. The event handling part seems to be the most out of control. Is this a reasonable way to do this? It would seem fairly easy to make this into a backbone.js app once it gets to this point.</p>

<p>thx</p>
