我有一个非常庞大的jQuery应用程序，我在使用以下两种方法处理点击事件。
第一种方法
<div id="myDiv">Some Content</div>
$('#myDiv').click(function(){
//Some code
});
第二种方法
<div id="myDiv" onClick="divFunction()">Some Content</div>
function divFunction(){
//Some code
}
在我的应用程序中，我使用第一种或第二种方法。哪一种更好？对性能来说更好吗？还有标准方面的考虑吗？
使用 $('#myDiv').click(function(){ 更好，因为它遵循标准的事件注册模型。(jQuery 在内部使用 addEventListener 和 attachEvent）。
基本上，在现代方式中注册事件是处理事件的不显眼的方式。此外，要为同一目标注册多个事件侦听器，可以对该目标调用addEventListener()。
var myEl = document.getElementById('myelement');
myEl.addEventListener('click', function() {
alert('Hello world');
}, false);
myEl.addEventListener('click', function() {
alert('Hello world again!!!');
}, false);
为什么要使用addEventListener？ (来自MDN)
addEventListener是注册事件监听器的W3C DOM规范方式。其好处如下：
- 它允许为一个事件添加多个处理程序。这对于需要良好运行甚至在使用其他库/扩展时的DHTML库或Mozilla扩展特别有用。
- 它提供了更精细的控制，确定何时激活侦听器（捕获或冒泡阶段）。
- 它适用于任何DOM元素，而不仅仅是HTML元素。
更多关于现代事件注册的内容 -> http://www.quirksmode.org/js/events_advanced.html
还有其他方法，例如设置HTML属性HTML属性，示例：
<button onclick="alert('Hello world!')">
或者DOM元素属性，例如：
myEl.onclick = function(event){alert('Hello world');};
老的HTML属性很容易被覆盖，应该避免使用它们，因为它们会使标记变得更大且不易读取。 内容/结构和行为的关注点未分离，使得查找错误更加困难。
使用DOM元素属性方法的问题是每个事件只能绑定一个事件处理程序到元素上。
有关传统事件处理的更多信息-> http://www.quirksmode.org/js/events_tradmod.html
MDN 参考文献: https://developer.mozilla.org/en-US/docs/DOM/event
$('#myDiv').click(function(){代码，然后从JavaScript动态生成20行HTML，每行都有一个按钮，当点击按钮时，需要执行同样的JavaScript函数。如果您首先执行这个步骤，那么它将不起作用，因为事件处理程序已在生成HTML之前添加。似乎更容易的方法是在动态生成的HTML中添加onclick="functionName()"，这样按钮就可以立即工作了。或者，您是否知道这种情况的更优雅的解决方案？ - zuallauz.delegate() 函数。它将事件附加到在网站未来出现的任何元素上。 - Zefiryn$('span'); // 6,604 operations per second
document.getElementsByTagName('span'); // 10,331,708 operations/sec
对于点击事件，请参考原生浏览器事件 vs jQuery 触发或者jQuery vs 原生点击事件绑定。
在 Windows Server 2008 R2 / 7 64 位操作系统上，使用 Chrome 22.0.1229.79 32 位进行测试。
$('#jquery a').click(window.testClickListener); // 2,957 operations/second
[].forEach.call( document.querySelectorAll('#native a'), function(el) {
el.addEventListener('click', window.testClickListener, false);
}); // 18,196 operations/second
根据我的理解，你的问题并不是关于是否使用jQuery。相反，问题应该是：在HTML中绑定事件或通过事件监听器绑定事件哪种更好？
内联绑定已经过时。此外，这种方式只能将一个函数绑定到特定事件上。
因此，我建议使用事件监听器。这样，你可以将许多函数绑定到一个事件上，并在需要时取消绑定。考虑以下纯JavaScript代码：
querySelector('#myDiv').addEventListener('click', function () {
// Some code...
});
这在大多数现代浏览器中都可以工作。
但是，如果您的项目中已经包含了jQuery，那么只需使用jQuery：.on或.click函数。
handler1抛出错误，则永远不会调用handler2和handler3。此外，您无法动态添加和删除侦听器中的某些函数。最后但并非最不重要的是，handler1，handler2和handler3必须在全局范围内声明，这是一种不好的做法。 - Michał Miszczyszyn选择这个选项，因为它既提供标准又提高了性能。
$('#myDiv').click(function(){
//Some code
});
因为第二种方法是简单的JavaScript代码而且比jQuery更快。但是性能会大致相同。
<div id="myDiv">Some Content</div>
$('#myDiv').click(divFunction);
function divFunction(){
//some code
}
$('#myDiv').click 更好，因为它将 JavaScript 代码与 HTML 分离开来。应该尝试保持页面的行为和结构不同。这会很有帮助。
工作原理不同。如果您使用click()，则可以添加多个函数，但如果您使用属性，则只会执行最后一个函数。
HTML
<span id="JQueryClick">Click #JQuery</span> </br>
<span id="JQueryAttrClick">Click #Attr</span> </br>
JavaScript
$('#JQueryClick').click(function(){alert('1')})
$('#JQueryClick').click(function(){alert('2')})
$('#JQueryAttrClick').attr('onClick'," alert('1')" ) //This doesn't work
$('#JQueryAttrClick').attr('onClick'," alert('2')" )
如果我们谈论性能，直接使用总是更快的，但是使用属性，您只能分配一个函数。
在我的观点中，当满足以下条件时，onclick是优于.click的首选方法：
我形成这个观点是因为移动设备上的JavaScript引擎比同一代桌面引擎慢4至7倍。我讨厌当我用移动设备访问网站时，因为jQuery绑定了所有事件而导致卡顿滚动，从而损害了我的用户体验和电池寿命。最近的另一个支持因素（尽管只应该关心政府机构;)），我们遇到IE7弹出一个消息框，指出JavaScript进程花费太长时间......等待或取消进程。每当有许多元素通过jQuery绑定时，这种情况都会发生。
注意分离关注点非常重要，因此事件绑定是通常被接受的方法。这基本上就是很多现有答案所说的。
然而不要太快地放弃声明性标记的想法。它有它的位置，在像Angularjs这样的框架中，是核心。
需要了解整个<div id="myDiv" onClick="divFunction()">Some Content</div>如此受到负面评价，是因为它被一些开发人员滥用。因此，它达到了亵渎神圣的程度，就像表格一样。一些开发人员实际上避免使用表格进行表格数据。这是人们在没有理解的情况下行事的完美例证。
尽管我喜欢将我的行为与视图分开的想法。但我认为把做什么（而不是如何做）的标记声明出来没有问题。它可以采用实际的onClick属性形式或自定义属性形式，就像bootstrap的javascript组件一样。
这样，通过一眼看到标记，您就可以看到它正在做什么，而不是试图查找JavaScript事件绑定器。
因此，作为上述第三个选择，使用数据属性来在标记中声明行为。行为被保留在视图之外，但您可以一眼看到正在发生的事情。
Bootstrap示例：
<button type="button" class="btn btn-lg btn-danger" data-toggle="popover" title="Popover title" data-content="And here's some amazing content. It's very engaging. Right?">Click to toggle popover</button>
来源：http://getbootstrap.com/javascript/#popovers
注意：第二个示例的主要缺点是全局命名空间的污染。这可以通过使用上述的第三种替代方法或像Angular这样的框架及其自动作用域的ng-click属性来规避。
<whatever onclick="doStuff();" onmouseover="in()" onmouseout="out()" />
onclick、onmouseover、onmouseout等事件实际上对性能来说是不利的（主要是在Internet Explorer中，你懂的）。如果你使用Visual Studio编写代码，并且在页面中使用这些事件，每一个事件都会创建一个单独的SCRIPT块占用内存，从而降低性能。
更不用说你应该有关注点分离：JavaScript和布局应该分离！
最好为任何这些事件创建事件处理程序，一个事件可以捕获数百/数千个项目，而不是为每个项目创建成千上万个单独的脚本块！
（还有，其他人所说的一切。）