Is it better to use onclick or to wire click handlers on page load
<p>Let's say I have markup like this:</p>

<pre><code>&lt;form action="foo"&gt;
    &lt;input name="bar" /&gt;
    &lt;button type="button"&gt;Save&lt;/button&gt;
&lt;/form&gt;

&lt;script&gt;
    function baz() {
        // Submit form via AJAX
    }
&lt;/script&gt;
</code></pre>

<p>Is it better to add this to the <code>&lt;button&gt;</code>:</p>

<pre><code>onclick="baz()"
</code></pre>

<p>or to add this to the <code>&lt;script&gt;</code> (assuming jQuery):</p>

<pre><code>$(function(){
    $('button').on('click', baz);
});
</code></pre>

<p>I've seen much ado about best practices forbidding inline javascript, and I tend to agree.  But I'm wondering if the manual wiring on document load/ready obfuscates what's going on since it removes the context of said wiring that is present when onclick="baz" is used.</p>

<p>Are there maintainability issues either way?  Other pros/cons to either approach?  My question at heart is what is the industry consensus on this particular aspect of using inline javascript (given that in general it's not a good coding practice)?</p>
