是使用onclick还是在页面加载时连接单击处理程序更好？

Question

假设我有这样的标记：

<form action="foo">
    <input name="bar" />
    <button type="button">Save</button>
</form>

<script>
    function baz() {
        // Submit form via AJAX
    }
</script>

最好将其添加到中<button>：

onclick="baz()"

或将其添加到<script>（假设jQuery）：

$(function(){
    $('button').on('click', baz);
});

对于禁止内联JavaScript的最佳做法，我已经看到了很多争议，我也倾向于同意。但是我想知道文档加载/就绪上的手动连接是否混淆了正在发生的事情，因为它消除了使用onclick =“ baz”时存在的所述连接的上下文。

是否存在可维护性问题？两种方法的其他优点/缺点？我心里的问题是，在使用内联javascript的特定方面，业界对此有什么共识（考虑到一般而言，这不是一个好的编码习惯）？

Answer 1

第二种方法被认为更好

$(function(){
    $('button').on('click', baz);
});

它被称为Unobtrusive JavaScript，您可以在其中将功能/行为与页面结构分开。