使用 onclick 调用函数还是使用 .click 绑定事件更好？ [复制]答案

【问题标题】：Is it better to call functions using onclick or bind events using .click? [duplicate]使用 onclick 调用函数还是使用 .click 绑定事件更好？ [复制]
【发布时间】：2013-02-28 07:34:58
【问题描述】：

假设我有一个 div，并且我想让某个代码在用户单击该 div 时运行。我可以通过 2 种方式做到这一点。

HTML

<div id="clickme">Click Me</div>

Javascript

$(document).ready(function(){
    $('#clickme').click(function(){
        //Other code here doing abc.
    });
});

第二种方式是调用一个函数，它确实是这样做的，但它是由一个函数调用的

<div id="clickme" onclick="clickme()">Click Me</div>

Javascript

function clickme(){
    //Other code doing abc.
}

我的问题是这两个代码都在做同样的事情吗？哪个更有效和推荐？

【问题讨论】：

这个问题已经在stackoverflow.com/questions/12627443/jquery-click-vs-onclick得到解答
@Simon 感谢链接一开始找不到它

标签： javascript jquery events onclick onclicklistener

【解决方案1】：

这取决于。通常，如果它很简单，我更喜欢使用 onlick=""。

另一方面，如果它更复杂，并且你想执行大量代码，我更喜欢使用绑定事件以提高可读性。

我真的相信 onclick="" 在性能/内存使用等方面更好。您使用的绑定事件在 jquery 层中，使用 onclick 事件直接从您的元素调用。

这是一个选择问题，真的。

我喜欢绑定事件的一点是，您可以无限可能地绑定和捕获点击或击键。还有 jquery 插件来增强绑定事件，例如延迟绑定等（延迟绑定是当您按下一个键并且代码在您按下它后执行 x 秒数时，这在您键入时进行搜索时很棒ajax，因为它阻止了每次按键时的请求）

如果您需要更多信息，请告诉我。

希望我能给你一个很好的见解:)

【讨论】：

所以如果我必须让很多元素可点击，你认为使用onclick="" 会更有效吗？在性能方面我也认为它可能会更快，但是 jQuery 有 .on() 它使用事件冒泡 DOM 树，可能比这更快？
在很多情况下我更喜欢 onclick=""。我绑定只是为了维护，因为代码会写得更好。性能方面，onclick 获胜 :)

【解决方案2】：

使用 .click(function(){ } 更好，因为它遵循标准事件注册模型。

在这里你可以分配多个回调，

前：

<script type="text/javascript">
$(document).ready(function() {
    $("#clickme").click(function() {
        alert("clicked!");
    });
    $("#clickme").click(function() {
        alert("I concur, clicked!");
    });
});
</script>

如果你用 bind() 绑定你的点击函数，那么你可以根据需求取消绑定那个特定的函数。

【讨论】：

【解决方案3】：

这取决于你是否喜欢：

1) JQuery 文档就绪事件绑定的匿名函数

这意味着您的命名空间不会被您不关心的另一个函数名称弄乱。这也意味着代码与其余的初始化例程一起。它还允许您绑定多个事件。

2) 一种绑定命名函数的声明方式。

这意味着您的函数需要相应地命名，并且您必须搜索文档以查看它是否/在哪里绑定。它也少了一个选择器调用，所以当然它在速度方面更有效。

为了代码的清晰性，大多数时候我会建议您将 javascript 初始化代码与 HTML 声明分开。

【讨论】：