关于javascript：jQuery.click()vs onClick

jQuery.click() vs onClick

我有一个巨大的jQuery应用程序，我正在使用以下两种方法进行点击事件。

第一种方法

HTML

1	Some Content

jQuery的

1
2
3

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

第二种方法

HTML

1	Some Content

JavaScript函数调用

1
2
3

function divFunction(){
//Some code
}

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

相关讨论

使用$('#myDiv').click(function(){更好，因为它遵循标准事件注册模型。 (jQuery内部使用addEventListener和attachEvent)。

基本上以现代方式注册事件是处理事件的不引人注目的方式。另外，要为目标注册多个事件侦听器，可以为同一目标调用addEventListener()。

1
2
3
4
5
6
7
8
9

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/

Why use addEventListener? (From MDN)

addEventListener is the way to register an event listener as specified
in W3C DOM. Its benefits are as follows:

It allows adding more than a single handler for an event. This is particularly useful for DHTML libraries or Mozilla extensions that
need to work well even if other libraries/extensions are used.

It gives you finer-grained control of the phase when the listener gets activated (capturing vs. bubbling)

It works on any DOM element, not just HTML elements.

有关现代事件注册的更多信息 - > http://www.quirksmode.org/js/events_advanced.html

其他方法，如设置HTML属性，例如：

1	<button onclick="alert('Hello world!')">

或DOM元素属性，例如：

1	myEl.onclick = function(event){alert('Hello world');};

很老，他们可以很容易写。

应避免使用HTML属性，因为它会使标记更大且可读性更低。对内容/结构和行为的担忧并没有很好地分离，使得更难找到bug。

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之前已添加事件处理程序。将onclick="functionName()"放入动态生成的HTML中然后按钮立即工作似乎更容易。或者你知道这种情况更优雅的解决方案吗？
@zuallauz对于那种情况jQuery提供.delegate()功能。它会将事件附加到将来在网站上出现的任何元素。
@Zefiryn感谢这个功能听起来不错，我将来会用它！
@zuallauz jQuery .live()函数可能是http://api.jquery.com/live/之后更简单的解决方案。这里有关于.bind()，.live()和.delegate()之间差异的好文章
@SimonRobb .live已弃用。对于旧版本使用.delegate或对于较新的jQuery版本使用.on。
@Vega，好点。可读性怎么样？现在，您必须在页面上搜索所有引用的JS文件，以按元素的ID查看元素的所有单击处理程序，而不是搜索函数名称。你对此有何看法？
我同意@supertonsky。我强烈反对$('＃myDiv')。click(function(){更好。在一个大的javascript应用程序中绑定一个事件变得非常难以找到绑定到该目标的所有引用。它是一个类绑定吗，一个id，一个孩子引用一个html标签？如果css发生变化，你需要更改的类名会发生什么呢？根据我与其他代码合作的经验，它变得非常难看。
@Jon您的不同意见是基于错误的编码实践。如果代码很难看，你应该考虑重构它......但是对于一个更好的方法没有意见，因为很难在丑陋的代码中找到引用。此外，如果您遵循简单的规则仅通过ID或类绑定处理程序，则很容易找到引用。任何其他方式，如使用遍历方法进行绑定都是错误的编码，如果代码不好，你就不能责怪标准。
@supertonsky我相信通过ID或类或js文件中的函数名搜索是相同的。但是，使用遍历方法(如$('#myTable').find('tr').click(或$('.someclass').parent().click()绑定处理程序时非常困难 - 但这些编码样式很糟糕。
@Jon具有相同ID的多个元素通常是错误的编码，并且可能具有不稳定的行为。相反，对于具有侦听器的多个项目，可以使用jQuery('#container').on('click','.listitem', function(){...})或在纯JavaScript中设置document.getElementById('container').addEventListener(...并在侦听器中检查event.target.getAttribute('class')。
@supertonsky至少我们现在能够在Firebug中使用HTML面板的Events选项卡。我知道它并不完全是你所追求的但是，它仍然是一个很好的帮助，它允许你检查在任何给定时间为选定的DOM节点注册的实际事件监听器，而不是扫描代码库并查看那些可能会在某个时候注册。
我在使用这个代码时遇到了麻烦，而没有在ready jquery函数中运行它：$(document).ready(function(){...});
虽然答案非常好，但似乎没有人质疑onClick事件的目的，无论调用它的方式如何。目的是在不刷新页面的情况下触发操作，但在99％的情况下，我们需要传递一个或多个参数。在这种情况下，如果使用data-param="value"或onClick="function(param)"，无论是哪种方式都可见并且可以覆盖，都无关紧要。我正在使用onClick，但我总是在处理数据之前检查并清理所有内容，因此对我来说无关紧要，参数是可见的。
"应该避免使用HTML属性，因为它会使标记更大"哦是的，但是现在我必须将id给予我所有的元素。此外，爱的回答说"应该避免，因为它错了"

为了获得更好的性能，请使用本机JavaScript。为了加快开发速度，请使用jQuery。检查jQuery与Native Element Performance的性能比较。

我已经在Windows Server 2008 R2 / 7 64位上使用32位Firefox 16.0进行了测试

1 2	$('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中进行测试

1
2
3
4
5

$('#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代码：

1
2
3

querySelector('#myDiv').addEventListener('click', function () {
// Some code...
});

这适用于大多数现代浏览器。

但是，如果您已在项目中包含jQuery - 只需使用jQuery：.on或.click函数。

相关讨论

为此，它将为您提供标准和性能。

1
2
3

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

因为第二种方法是简单的JavaScript代码，并且比jQuery更快。但这里的表现大致相同。

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

1
2
3
4
5
6
7

Some Content

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

function divFunction(){
//some code
}

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

相关讨论

恕我直言，onclick是仅在满足以下条件时优先于.click的方法：

页面上有很多元素
只有一个事件要为click事件注册
你担心移动性能/电池寿命

我之所以形成这种观点，是因为移动设备上的JavaScript引擎比同代产品中的JavaScript引擎慢4到7倍。当我访问我的移动设备上的网站并接收抖动滚动时，我讨厌它，因为jQuery以牺牲我的用户体验和电池寿命为代价来绑定所有事件。另一个最近的支持因素，虽然这应该只是政府机构关注的问题;)，我们有一个IE7弹出窗口，上面有一个消息框，说明JavaScript进程需要很长时间......等待或取消进程。每当有很多元素通过jQuery绑定时就会发生这种情况。

作品的差异。如果使用click()，则可以添加多个函数，但如果使用属性，则只执行一个函数 - 最后一个。

DEMO

HTML

1 2	<span id="JQueryClick">Click #JQuery</span> </br> <span id="JQueryAttrClick">Click #Attr</span> </br>

JavaScript的

1
2
3
4
5

$('#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这样的框架是其核心。

需要有一个理解，整个Some Content被严重羞辱，因为它被一些开发人员滥用。所以它达到了亵渎神圣的程度，就像tables一样。一些开发人员实际上避免使用tables表格数据。这是人们在不理解的情况下行事的完美典范。

虽然我喜欢把我的行为与我的观点分开的想法。我发现标记没有问题，声明它做了什么(不是它如何做，这是行为)。它可能是实际的onClick属性或自定义属性的形式，就像bootstraps javascript组件一样。

这样，通过只看一下标记，你可以看到它做了什么，而不是试图反向查找javascript事件绑定器。

因此，作为上述内容的第三种替代方法，使用数据属性来声明性地宣告标记内的行为。行为被排除在视野之外，但一眼就能看出发生了什么。

Bootstrap示例：

1	<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属性来规避。

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

onclick，onmouseover，onmouseout等事件实际上对性能不利(主要在InternetExplorer中，如图)。如果使用Visual Studio进行编码，则在运行包含这些内容的页面时，每个页面都会创建一个占用内存的单独SCRIPT块，从而降低性能。

更不用说你应该分开关注点：JavaScript和布局应该是分开的！

为任何这些事件创建evenHandler总是更好，一个事件可以捕获数百/数千个项目，而不是为每个事件创建数千个单独的脚本块！

(另外，其他人都在说。)

两者都不是更好，因为它们可能用于不同的目的。 onClick(实际上应该onClick)表现得稍微好一点，但我非常怀疑你会注意到那里的差异。

值得注意的是，它们做了不同的事情：.click可以绑定到任何jQuery集合，而onClick必须在您希望它绑定到的元素上内联使用。您还可以仅使用onClick绑定一个事件，而使用.click可以继续绑定事件。

在我看来，我会保持一致，只是在任何地方使用.click并将我的所有JavaScript代码保存在一起并与HTML分开。

不要使用onClick。没有任何理由使用它，除非你知道你在做什么，而你可能不知道。

相关讨论

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

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

第一种方法是偏好。它使用高级事件注册模型▼显示，这意味着您可以将多个处理程序附加到同一元素。您可以轻松访问事件对象，处理程序可以存在于任何函数的范围内。而且，它是动态的，即它可以在任何时间调用，特别适合动态生成的元素。无论您使用jQuery，其他库还是本机方法都无关紧要。

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

您的性能或标准问题无法轻易解决。这两种方法完全不同，并做了不同的事情。第一个是更强大的，而第二个被鄙视(被认为是坏的风格)。

使用onClick的第一种方法不是jQuery，而只是Javascript，所以你不会得到jQuery的开销。如果你需要将jQuery方法添加到其他元素而不向每个元素添加事件处理程序，那么jQuery方式可以通过选择器进行扩展，但是现在你只需要使用jQuery就可以了。

就个人而言，因为你使用的是jQuery，我会坚持使用它，因为它是一致的，并且会将标记与脚本分离。

相关讨论

Onclick函数Jquery

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