jQuery.click（）与onClick
我有一个巨大的jQuery应用程序，我正在使用下面的两个方法的点击事件。
第一种方法
HTML
<div id="myDiv">Some Content</div> jQuery的
$('#myDiv').click(function(){ //Some code });
第二种方法
HTML
<div id="myDiv" onClick="divFunction()">Some Content</div>
JavaScript函数调用
function divFunction(){ //Some code }
我在我的应用程序中使用第一种或第二种方法。 哪一个更好？ 更好的performance？ 和标准？
使用$('#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属性 ，例如：
<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
为了获得更好的性能，请使用原生JavaScript。 为了更快的开发，请使用jQuery。 检查jQuery性能比较本地元素性能 。
我已经在Windows Server 2008 R2 / 7 64位的Firefox 16.0 32位上做了testing
$('span'); // 6,604 operations per second document.getElementsByTagName('span'); // 10,331,708 operations/sec
对于点击事件，检查本机浏览器事件与jQuery的触发器或jQuery与原生点击事件绑定 。
在Windows Server 2008 R2 / 7 64位版本的32位版本的Chrome 22.0.1229.79上进行testing
$('#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中通过内联绑定事件还是通过事件监听器更好？
正如上面提到的@Vega，内联绑定已被弃用。 而且这样你只能把一个函数绑定到某个事件上。 所以我推荐使用监听器。 无论是jQuery的.bind / .click ，还是纯JavaScript的.addEventListener – 这都不重要。 这样，您可以将多个函数绑定到一个事件，并在需要时解除绑定。 考虑这个纯JavaScript代码：
querySelector('#myDiv').addEventListener('click', function () { // Some code... });
这将在大多数现代浏览器中工作。 如果你关心Internet Explorer的兼容性，或者如果你在你的项目中包含jQuery – 使用jQuery。
$('#myDiv').click更好，因为它将JavaScript代码与HTML分开。 必须尽力保持页面行为和结构的不同 。 这有很大的帮助。
去这个，因为它会给你标准和性能。
$('#myDiv').click(function(){ //Some code });
第二种方法是简单的JavaScript代码，比jQuery更快。 但是这里的performance会大致相同。
你可以结合他们，使用jQuery绑定function的点击
<div id="myDiv">Some Content</div> $('#myDiv').click(divFunction); function divFunction(){ //some code }
恕我直言，onclick是首选的方法.click只有当满足以下条件：
- 页面上有很多元素
- 只有一个事件要注册点击事件
- 你担心移动性能/电池寿命
我之所以形成这样的观点，是因为移动设备上的JavaScript引擎比在同一代中制作的桌面应用程序慢了4到7倍。 我讨厌它，当我访问我的移动设备上的网站，并收到抖动滚动，因为jQuery绑定所有的事件，牺牲我的用户体验和电池寿命。 另一个最近的支持因素，虽然这应该只是一个与政府机构的关注;），我们有IE7popup一个消息框，说明JavaScript进程正在花费很长时间…等待或取消过程。 每当有大量元素通过jQuery绑定时，就会发生这种情况。
作品的差异。 如果使用click（），则可以添加多个函数，但是如果使用属性，则只会执行一个函数 – 最后一个函数。
DEMO
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')" )
如果我们正在谈论性能，无论如何直接使用总是更快，但是使用属性，您将只能分配一个函数。
关注点的分离是关键，因此事件绑定是公认的方法。 这基本上是现有答案所说的。
但是，不要太快地抛弃声明性标记的想法。 它有它的地方，像Angularjs框架，是最重要的。
需要了解整个<div id="myDiv" onClick="divFunction()">Some Content</div>被羞辱得太厉害了，因为它被一些开发者滥用。 所以它达到了亵渎的地步，就像tables一样。 一些开发人员实际上避免了表格数据的表格。 这是人们不理解的完美例子。
虽然我喜欢把我的行为与我的观点分开的想法。 我看不出标记声明它做了什么 （不是它是如何做的，这是行为）。 它可能是实际onClick属性或自定义属性的forms，很像引导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属性来自动作用。
两者都不是更好的 ，因为它们可以用于不同的目的。 onClick （实际上应该是onclick ）performance稍微好一点，但我非常怀疑你会发现有一个不同的地方。
值得注意的是，他们做了不同的事情： .click可以绑定到任何jQuery集合，而onclick必须内联使用你想要绑定的元素。 你也可以绑定一个事件来使用onclick ，而.click让你继续绑定事件。
在我看来，我会保持一致，只需使用.click ，并将所有的JavaScript代码放在一起并与HTML分开。
不要使用onclick 。 除非你知道你在做什么，否则没有任何理由使用它，而你可能不知道。
<whatever onclick="doStuff();" onmouseover="in()" onmouseout="out()" />
onclick，onmouseover，onmouseout等事件实际上对性能不利 （在Internet Explorer中主要是去图）。 如果你使用Visual Studio编写代码，当你用这些代码运行一个页面时，每一个都会创build一个独立的SCRIPT块来占用内存，从而降低性能。
更何况你应该有一个分离的担忧 ：JavaScript和布局应该分开！
为这些事件创buildevenHandler总是更好，一个事件可以捕获成千上万个项目，而不是为每个事件创build数千个独立的脚本块！
（另外，其他人都在说一切）
那么， jQuery背后的主要思想之一就是将JavaScript与讨厌的HTML代码分开。 第一种方法是要走的路。
大多数情况下，当性能是唯一标准时，原生JavaScript方法是比jQuery更好的select，但是jQuery使用JavaScript并使开发变得容易。 您可以使用jQuery，因为它不会降低性能太多。 在你的具体情况下，performance的差异是可以忽略的。
第一种使用onclick方法不是jQuery，而是简单的Javascript，所以你不会得到jQuery的开销。 如果您需要将jQuery方法添加到其他元素而不添加事件处理程序到每个元素，jQuery方法可以通过select器进行扩展，但是现在只需要使用jQuery就可以了。
就个人而言，因为您使用的是jQuery，所以我会坚持使用它，因为它是一致的，并且将标记与脚本分离。
第一种方法是喜欢。 它使用高级事件注册模型[s] ，这意味着您可以将多个处理程序附加到相同的元素。 您可以轻松访问事件对象，并且处理程序可以位于任何函数的作用域中。 而且，它是dynamic的，也就是说它可以随时调用，特别适合dynamic生成的元素。 无论您使用jQuery，其他库还是本地方法，都无关紧要。
第二种使用内联属性的方法需要很多全局函数（这会导致命名空间污染），并将内容/结构（HTML）与行为（JavaScript）混合在一起。 不要使用它。
关于性能或标准的问题不能轻易回答。 这两种方法是完全不同的，做不同的事情。 第一个是更强大，第二个是鄙视（被认为是坏的风格）。
