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
}

我在应用程序中使用第一种或第二种方法。哪一个更好？性能更好？和标准？

使用$('#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);

http://jsfiddle.net/aj55x/1/

为什么要使用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与Native Element Performance的性能比较。

我已经在Windows Server 2008 R2 / 7 64位版本的Firefox 16.0 32位版本中进行了测试

$('span'); // 6,604 operations per second
document.getElementsByTagName('span'); // 10,331,708 operations/sec

对于点击事件，请检查本机浏览器事件与jquery触发器或jQuery与本机Click事件绑定。

在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或.clickfunction。

您可以将它们结合起来，使用jQuery将函数绑定到click

<div id="myDiv">Some Content</div>

$('#myDiv').click(divFunction);

function divFunction(){
 //some code
}

$('#myDiv').click更好，因为它将JavaScript代码与HTML分开。必须设法使页面行为和结构保持不同。这很有帮助。

去做，因为它会给你标准和性能。

 $('#myDiv').click(function(){
      //Some code
 });

第二种方法是简单的JavaScript代码，并且比jQuery更快。但是这里的性能将大致相同。

恕我直言，仅当满足以下条件时，onclick才是.click的首选方法：

• 页面上有很多元素
• 单击事件仅注册一个事件
• 您担心移动性能/电池寿命

我之所以形成这种观点，是因为移动设备上的JavaScript引擎比同代的台式机慢4到7倍。当我访问移动设备上的站点并收到抖动的滚动时，我讨厌它，因为jQuery绑定了所有事件，但以牺牲用户体验和电池寿命为代价。另一个最近的支持因素，尽管这只应该是政府机构关心的问题；），但我们在IE7弹出窗口中显示了一个消息框，指出JavaScript进程要花很长时间……等待或取消。每当有很多要通过jQuery绑定的元素发生这种情况。

作品差异。如果使用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')" )

如果说性能，在任何情况下直接使用总是更快，但是使用属性，您将只能分配一个功能。

关注点分离在这里很关键，因此事件绑定是公认的方法。基本上，这是许多现有答案所表明的。

但是，不要太快放弃声明性标记的想法。它具有它的位置，并且以Angularjs之类的框架为中心。

需要理解的是，<div id="myDiv" onClick="divFunction()">Some Content</div>由于某些开发人员滥用了整体，因此整体遭受了如此严重的羞辱。这样就达到了牺牲品的程度，就像tables。一些开发人员实际上避免tables使用表格数据。这是人们在不理解的情况下行事的完美典范。

尽管我喜欢让自己的行为与观点分开的想法。我看到的标记没有问题，宣布什么它（不是如何它吧，那的行为）。它可能采用实际的onClick属性或自定义属性的形式，非常类似于引导JavaScript组件。

通过这种方式，只需浏览一下标记，就可以看到它的作用，而不必尝试反向查找javascript事件绑定器。

因此，作为上述方法的第三种选择，使用数据属性来声明性地声明标记内的行为。行为不可见，但您一眼就能看到发生了什么。

引导程序示例：

<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）性能稍好一些，但是我非常怀疑您会注意到那里的区别。

值得注意的是，它们执行不同的操作：.click可以绑定到任何jQuery集合，而onclick必须在要绑定到其的元素上内联使用。您也只能将一个事件绑定到using onclick，而.click让您继续绑定事件。

在我看来，我将保持一致，只.click在各处使用它，并将所有 JavaScript代码放在一起，并与HTML分开。

不要使用onclick。除非您知道自己在做什么，否则可能没有任何理由使用它。

<whatever onclick="doStuff();" onmouseover="in()" onmouseout="out()" />

事件实际上不利于性能（主要是在Internet Explorer中，如图）。onclick，onmouseover，onmouseout等事件。如果使用Visual Studio进行编码，则在使用这些代码运行页面时，其中的每一个都会创建一个单独的SCRIPT块，占用内存，从而降低性能。

更不用说您应该分开关注：JavaScript和布局应该分开！

最好为这些事件中的任何一个创建evenHandlers，一个事件可以捕获成百上千个项目，而不是为每个事件创建成千上万个单独的脚本块！

（此外，其他所有人都在说。）

好吧，jQuery的主要思想之一就是将JavaScript与讨厌的HTML代码分开。第一种方法是要走的路。

在大多数情况下，当性能是唯一标准时，原生JavaScript方法是优于jQuery的更好选择，但是jQuery利用JavaScript并使开发变得容易。您可以使用jQuery，因为它不会降低性能。在您的特定情况下，性能差异是可以忽略的。

第一种使用方法 onclick方法不是jQuery，而是简单的Javascript，因此您不会得到jQuery的开销。如果您需要将选择器扩展到其他元素而不将事件处理程序添加到每个元素，则可以通过选择器扩展jQuery方式，但是现在您有了它，是否需要使用jQuery只是一个问题。

就个人而言，由于您使用的是jQuery，因此我会坚持使用它，因为它是一致的，并且确实使标记与脚本脱钩。

第一种方法是首选。它使用高级事件注册模型，这意味着您可以将多个处理程序附加到同一元素。您可以轻松访问事件对象，并且处理程序可以存在于任何函数的作用域中。而且，它是动态的，即可以随时调用，特别适合动态生成的元素。不管您直接使用jQuery，其他库还是直接使用本机方法都没有关系。

第二种方法使用内联属性，需要大量全局函数（这会导致名称空间污染），并将内容/结构（HTML）与行为（JavaScript）混合在一起。不要使用它。

您对性能或标准的问题无法轻易回答。这两种方法完全不同，并且执行不同的操作。第一个比较强大，而第二个则被鄙视（被认为是不好的风格）。

Onclick函数Jquery

$('#selector').click(function(){ //Your Functionality });