jQuery.click（）与onClick

本文翻译自：jQuery.click() vs onClick

I have a huge jQuery application, and I'm using the below two methods for click events. 我有一个庞大的jQuery应用程序，并且我将以下两种方法用于点击事件。

First method 第一种方法

HTML 的HTML

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

jQuery jQuery的

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

Second method 第二种方法

HTML 的HTML

<div id="myDiv" onClick="divFunction()">Some Content</div>

JavaScript function call JavaScript函数调用

function divFunction(){
    //Some code
}

I use either the first or second method in my application. 我在应用程序中使用第一种或第二种方法。 Which one is better? 哪一个更好？ Better for performance? 性能更好？ And standard? 和标准？

---

#1楼

参考：https://stackoom.com/question/qyyR/jQuery-click-与onClick

---

#2楼

Using $('#myDiv').click(function(){ is better as it follows standard event registration model. (jQuery internally uses addEventListener and attachEvent ). 使用$('#myDiv').click(function(){ 更好，因为它遵循标准的事件注册模型。（jQuery 内部使用addEventListener和attachEvent ）。

Basically registering an event in modern way is the unobtrusive way of handling events. 基本上，以现代方式注册事件是处理事件的简便方法。 Also to register more than one event listener for the target you can call addEventListener() for the same target. 另外，要为目标注册多个事件侦听器，您可以为同一目标调用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/ http://jsfiddle.net/aj55x/1/

Why use addEventListener? 为什么要使用addEventListener？ (From MDN) （来自MDN）

addEventListener is the way to register an event listener as specified in W3C DOM. addEventListener是注册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. 这对于即使使用其他库/扩展也需要正常工作的DHTML库或Mozilla扩展特别有用。
• 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. 它适用于任何DOM元素，而不仅仅是HTML元素。

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

Other methods such as setting the HTML attributes , example: 其他方法，例如设置HTML属性 ，例如：

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

Or DOM element properties , example: 或DOM元素属性 ，例如：

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

are old and they can be over written easily. 很老，可以很容易地改写。

HTML attribute should be avoided as It makes the markup bigger and less readable. 应避免使用HTML属性，因为它会使标记更大且可读性更差。 Concerns of content/structure and behavior are not well-separated, making a bug harder to find. 对内容/结构和行为的关注没有很好地分开，这使得更难以发现错误。

The problem with the DOM element properties method is that only one event handler can be bound to an element per event. DOM元素属性方法的问题是每个事件只能将一个事件处理程序绑定到一个元素。

More about Traditional event handling -> http://www.quirksmode.org/js/events_tradmod.html 有关传统事件处理的更多信息-> http://www.quirksmode.org/js/events_tradmod.html

MDN Reference: https://developer.mozilla.org/en-US/docs/DOM/event MDN参考： https : //developer.mozilla.org/en-US/docs/DOM/event

---

#3楼

You could combine them, use jQuery to bind the function to the click 您可以将它们结合起来，使用jQuery将函数绑定到click

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

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

function divFunction(){
 //some code
}

---

#4楼

The first method is to prefer. 第一种方法是首选。 It uses the advanced event registration model[s] , which means you can attach multiple handlers to the same element. 它使用高级事件注册模型 ，这意味着您可以将多个处理程序附加到同一元素。 You can easily access the event object, and the handler can live in any function's scope. 您可以轻松访问事件对象，并且处理程序可以存在于任何函数的作用域中。 Also, it is dynamic, ie it can be invoked at any time and is especially well-suited for dynamically generated elements. 而且，它是动态的，即可以随时调用，特别适合动态生成的元素。 Whether you use jQuery, an other library or the native methods directly does not really matter. 不管您直接使用jQuery，其他库还是直接使用本机方法都没有关系。

The second method, using inline attributes, needs a lot of global functions (which leads to namespace pollution) and mixes the content/structure (HTML) with the behavior (JavaScript). 第二种方法使用内联属性，需要大量全局函数（这会导致名称空间污染），并将内容/结构（HTML）与行为（JavaScript）混合在一起。 Do not use that. 不要使用它。

Your question about performance or standards can't be easily answered. 您对性能或标准的问题无法轻易回答。 The two methods are just completely different, and do different things. 两种方法完全不同，并且执行不同的操作。 The first one is mightier, while the second one is despised (considered bad style). 第一个比较强大，而第二个则被鄙视（被认为是不好的风格）。

---

#5楼

Most of the time, native JavaScript methods are a better choice over jQuery when performance is the only criteria, but jQuery makes use of JavaScript and makes the development easy. 在大多数情况下，当性能是唯一标准时，原生JavaScript方法是优于jQuery的更好选择，但是jQuery利用JavaScript并使开发变得容易。 You can use jQuery as it does not degrade performance too much. 您可以使用jQuery，因为它不会降低性能。 In your specific case, the difference of performance is ignorable. 在您的特定情况下，性能差异是可以忽略的。

---

#6楼

Neither one is better in that they may be used for different purposes. 两种方法都可以用于不同的目的，这两者都不是更好的选择 。 onClick (should actually be onclick ) performs very slightly better, but I highly doubt you will notice a difference there. onClick （实际上应该是onclick ）的性能要好很多，但是我非常怀疑您会注意到那里的区别。

It is worth noting that they do different things: .click can be bound to any jQuery collection whereas onclick has to be used inline on the elements you want it to be bound to. 值得注意的是，它们执行不同的操作： .click可以绑定到任何jQuery集合，而onclick必须在要绑定到其的元素上内联使用。 You can also bind only one event to using onclick , whereas .click lets you continue to bind events. 您也只能使用onclick绑定一个事件，而.click允许您继续绑定事件。

In my opinion, I would be consistent about it and just use .click everywhere and keep all of my JavaScript code together and separated from the HTML. 在我看来，我会保持一致，只在各处使用.click并将我的所有 JavaScript代码放在一起并与HTML分开。

Don't use onclick . 不要使用onclick 。 There isn't any reason to use it unless you know what you're doing, and you probably don't. 除非您知道自己在做什么，否则可能没有任何理由使用它。