javascript - 在页面加载时使用 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将功能/行为与页面结构分开。