.on（'click'）和.click（）之间的区别
下面的代码有什么区别吗？
$('#whatever').on('click', function() { /* your code here */ }); 和
$('#whatever').click(function() { /* your code here */ });
我认为，区别在于使用模式。
我宁愿。 .on ，因为前者可以使用更less的内存和工作dynamic添加元素。
考虑下面的html：
<html> <button id="add">Add new</button> <div id="container"> <button class="alert">alert!</button> </div> </html>
我们通过添加新的button
$("button#add").click(function() { var html = "<button class='alert'>Alert!</button>"; $("button.alert:last").parent().append(html); });
并要“警报！” 显示警报。 我们可以使用“点击”或“打开”。
当我们使用click
$("button.alert").click(function() { alert(1); });
与上面，为每个匹配select器的单个元素创build一个单独的处理程序。 这意味着
- 许多匹配元素将创build许多相同的处理程序，从而增加内存占用量
- dynamic添加的项目将不会有处理程序 – 即，在上面的HTML新添加“警报！ button将无法工作，除非你重新绑定处理程序。
当我们使用.on
$("div#container").on('click', 'button.alert', function() { alert(1); });
用上面的方法，为所有匹配select器的元素 （包括dynamic创build的元素）提供一个处理器。
另一个使用.on理由
正如Adrien在下面评论的那样，使用.on另一个原因是命名空间事件。
如果使用.on("click", handler)添加一个处理程序，您通常会使用.off("click", handler)将其删除，这将删除该处理程序。 显然这只有在你有一个函数的引用时才有效，那么如果你不这样做呢？ 您使用命名空间：
$("#element").on("click.someNamespace", function() { console.log("anonymous!"); });
与解除绑定通过
$("#element").off("click.someNamespace");
下面的代码有什么区别吗？
不，问题中的两个代码示例之间没有function差异。 .click(fn)是.on("click", fn)的“快捷方式”。 从.on()的文档 ：
有一些事件的简写方法，如
.click()可以用来附加或触发事件处理程序。 有关速记方法的完整列表，请参阅事件类别 。
请注意， .on()与.on()不同之处在于它能够通过传递selector参数来创build委托事件处理程序 ，而.click()则不能。 当.on()在没有selector参数的情况下调用时，其行为与.on()完全相同。 如果你想要事件委托，使用.on() 。
.on()是从jQuery 1.7开始执行所有事件绑定的推荐方式。 它把.bind()和.live()所有function都转换成一个函数，当你传递不同的参数时，它会改变行为。
正如你写的例子，两者之间没有区别。 两者都绑定一个处理程序到#whatever的click事件。 on()提供了额外的灵活性，允许您将由#whatever的子#whatever触发的事件委托给一个处理函数（如果您select的话）。
// Bind to all links inside #whatever, even new ones created later. $('#whatever').on('click', 'a', function() { ... });
正如其他答案所述：
$("#whatever").click(function(){ }); // is just a shortcut for $("#whatever").on("click", function(){ })
注意.on()支持.on()支持的其他几个参数组合，允许它处理事件委托（取代.delegate()和.live() ）。
（显然还有其他类似的快捷方法，用于“键盘”，“焦点”等）
我发布一个额外的答案的原因是提到如果你没有参数调用.click()会发生什么：
$("#whatever").click(); // is a shortcut for $("#whatever").trigger("click");
注意如果你直接使用.trigger() ，你也可以传递额外的参数或jQuery事件对象，这是你不能用.click()做的。
我也想提一下，如果你看jQuery源代码（在jquery-1.7.1.js中），你会发现内部的.keyup() （或.keyup()等）函数实际上会调用.on()或.trigger() 。 显然这意味着你可以放心，他们确实有相同的结果，但这也意味着使用.click()有更多的开销 – 没有什么担心，甚至在大多数情况下考虑，但理论上可能很重要在特殊情况下。
编辑：最后，请注意.on()允许您将几个事件绑定到一行中的相同function，例如：
$("#whatever").on("click keypress focus", function(){});
不，没有。
on()的要点是其他的重载，以及处理没有快捷方法的事件的能力。
它们看起来是一样的… click（）函数的文档：
这个方法是.bind（'click'，handler）的一个快捷方式，
on（）函数的文档：
从jQuery 1.7开始，.on（）方法提供了附加事件处理程序所需的全部function。 有关从较旧的jQuery事件方法转换的帮助，请参阅.bind（），.delegate（）和.live（）。 要删除与.on（）绑定的事件，请参阅.off（）。
.click事件只在元素被渲染时才起作用，并且只在DOM准备就绪时被附加到元素上。
.on事件dynamic地附加到DOM元素，当您想要将事件附加到在ajax请求或其他内容（DOM准备好之后）上呈现的DOM元素时，这非常有用。
