jQuery 使用 onclick 调用函数还是使用 .click 绑定事件更好？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/15129968/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Is it better to call functions using onclick or bind events using .click?
提问by LoneWOLFs
Suppose I have a div and I want to make a certain code run when a user clicks on that div. I can accomplish that in 2 ways.
假设我有一个 div 并且我想让某个代码在用户单击该 div 时运行。我可以通过两种方式实现这一点。
HTML
HTML
<div id="clickme">Click Me</div>
Javascript
Javascript
$(document).ready(function(){
$('#clickme').click(function(){
//Other code here doing abc.
});
});
the 2nd way is calling a function which does exactly that but it is called by a function
第二种方法是调用一个函数，该函数正是这样做的，但它是由一个函数调用的
<div id="clickme" onclick="clickme()">Click Me</div>
Javascript
Javascript
function clickme(){
//Other code doing abc.
}
My question is that are both these codes doing the same thing? and which is more efficient and recommended?
我的问题是这两个代码都在做同样的事情吗？哪个更有效和更推荐？
回答by Oliver M Grech
It depends. Usuaslly if it's something quite simple I prefer to use onlick="".
这取决于。通常，如果它很简单，我更喜欢使用 onlick=""。
On the other hand, if it's more complex and you want to execute a lot of code, I prefer to use bind events for the sake of readability.
另一方面，如果它更复杂并且您想要执行大量代码，为了可读性，我更喜欢使用绑定事件。
I honestly believe that onclick="" is better in terms of performance/memory usage etc. The bind events you're using are in the layer of jquery and with onclick the event is directly invoked from your element.
老实说，我相信 onclick="" 在性能/内存使用等方面更好。您使用的绑定事件位于 jquery 层，并且使用 onclick 事件直接从您的元素调用。
It's a matter of choice, really.
这是一个选择的问题，真的。
Something which I like in bind events is that you have endless possibilities on what to bind and capture clicks or keystrokes. There are also jquery plugins to enhance the bind events, such as bind with delay etc (bind with delay is when you press a key and the code is executed x amount of seconds after you press it, which is great when doing search as you type over ajax as it prevents a request on each key press)
我在绑定事件中喜欢的一点是，你有无限的可能性来绑定和捕获点击或击键。还有 jquery 插件来增强绑定事件，例如延迟绑定等（延迟绑定是当你按下一个键并且代码在你按下它后执行 x 秒的时间，这在你输入时进行搜索时很棒在 ajax 上，因为它阻止了每次按键的请求）
Let me know if you require further info.
如果您需要更多信息，请告诉我。
Hope I gave you a good insight :)
希望我给了你一个很好的见解:)
回答by EnterJQ
Using .click(function(){ } is better as it follows standard event registration model.
使用 .click(function(){ } 更好，因为它遵循标准事件注册模型。
And here you are permitted to assign multiple callbacks,
在这里你可以分配多个回调，
EX:
前任：
<script type="text/javascript">
$(document).ready(function() {
$("#clickme").click(function() {
alert("clicked!");
});
$("#clickme").click(function() {
alert("I concur, clicked!");
});
});
</script>
here if u bind your click function with bind(), then u can unbind that particular function depends on requirement.
在这里，如果您使用 bind() 绑定您的点击功能，那么您可以根据需要取消绑定该特定功能。
回答by nurettin
It depends on whether if you prefer:
这取决于您是否喜欢：
1) An anonymous function bound at the document ready event of JQuery
1) JQuery 文档就绪事件绑定的匿名函数
Which means your namespace is not cluttered with yet another function name you don't care about. It also means that the code is together with the rest of the initialization routines. It also lets you bind more than one event.
这意味着您的命名空间不会被另一个您不关心的函数名称弄得乱七八糟。这也意味着代码与其余的初始化例程一起。它还允许您绑定多个事件。
2) A declarative way of binding a named function.
2) 绑定命名函数的声明方式。
Which means your function needs to be named accordingly and you will have to search the document to see if/where it is bound. It is also one less selector call so of course it is more effective speed-wise.
这意味着您的函数需要相应地命名，您必须搜索文档以查看它是否/在哪里绑定。它也是一个更少的选择器调用，所以当然它在速度方面更有效。
For coding clarity, most of the time I would advise you to separate your javascript initialization code from your HTML declarations.
为了编码清晰，大多数时候我会建议您将 javascript 初始化代码与 HTML 声明分开。
