Javascript jQuery.click（）与onClick

我有一个巨大的jQuery应用程序，我使用以下两种方法来处理单击事件

第一种方法

HTML 第二种方法

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

使用

$（“#myDiv”）。单击（函数（）{

更好，因为它遵循标准事件注册模型。（jQuery使用和）

基本上，在中注册事件是处理事件的方式。此外，要为目标注册多个事件侦听器，可以为同一目标调用

addEventListener（）

var myEl = document.getElementById('myelement');

myEl.addEventListener('click', function() {
    alert('Hello world');
}, false);

myEl.addEventListener('click', function() {
    alert('Hello world again!!!');
}, false);

（来自MDN）

addEventListener是按照指定注册事件侦听器的方法 在W3C DOM中。其好处如下：

• 它允许为一个事件添加多个处理程序 即使使用了其他库/扩展，也需要很好地工作
• 当监听器被激活时，它为您提供了更细粒度的阶段控制（捕获与冒泡）
• 它适用于任何DOM元素，而不仅仅是HTML元素

有关现代活动注册的更多信息->

其他方法，如设置，例如：

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

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

它们很老，很容易被改写

HTML属性应该避免，因为它会使标记更大，可读性更低。内容/结构和行为的关注点没有很好地分开，使得bug更难发现

DOM element properties方法的问题是每个事件只能将一个事件处理程序绑定到一个元素

有关传统事件处理的更多信息->

MDN参考：

使用

$（'#myDiv'）。单击（函数（）{

更好，因为它遵循标准事件注册模型。（jQuery使用和）

基本上，在中注册事件是处理事件的方式。此外，要为目标注册多个事件侦听器，可以为同一目标调用

addEventListener（）

var myEl = document.getElementById('myelement');

myEl.addEventListener('click', function() {
    alert('Hello world');
}, false);

myEl.addEventListener('click', function() {
    alert('Hello world again!!!');
}, false);

（来自MDN）

addEventListener是按照指定注册事件侦听器的方法 在W3C DOM中。其好处如下：

• 它允许为一个事件添加多个处理程序 即使使用了其他库/扩展，也需要很好地工作
• 当监听器被激活时，它为您提供了更细粒度的阶段控制（捕获与冒泡）
• 它适用于任何DOM元素，而不仅仅是HTML元素

有关现代活动注册的更多信息->

其他方法，如设置，例如：

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

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

它们很老，很容易被改写

HTML属性应该避免，因为它会使标记更大，可读性更低。内容/结构和行为的关注点没有很好地分开，使得bug更难发现

DOM element properties方法的问题是每个事件只能将一个事件处理程序绑定到一个元素

有关传统事件处理的更多信息->

---

MDN引用：

您可以将它们组合起来，使用jQuery将函数绑定到单击

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

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

function divFunction(){
 //some code
}

一些内容
$（'#myDiv'）。单击（divFunction）；
函数divFunction（）{
//一些代码
}

您可以将它们组合在一起，使用jQuery将函数绑定到click

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

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

function divFunction(){
 //some code
}

一些内容
$（'#myDiv'）。单击（divFunction）；
函数divFunction（）{
//一些代码
}

第一种方法是首选。它使用，这意味着您可以将多个处理程序附加到同一个元素。您可以轻松访问事件对象，并且处理程序可以位于任何函数的作用域中。此外，它是动态的，即可以随时调用，特别适合于动态生成的元素。是否使用查询时，直接使用其他库或本机方法实际上并不重要

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

---

你关于性能或标准的问题不容易回答。这两种方法完全不同，做的事情也不同。第一种方法更强大，而第二种方法被轻视（被认为是糟糕的风格）.

第一种方法是首选。它使用，这意味着您可以将多个处理程序附加到同一元素。您可以轻松访问事件对象，并且处理程序可以位于任何函数的作用域中。此外，它是动态的，即可以随时调用，特别适合于动态生成的元素。是否使用jQu实际上，直接使用其他库或本机方法并不重要

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

---

你关于性能或标准的问题不容易回答。这两种方法完全不同，做的事情也不同。第一种方法更强大，而第二种方法被轻视（被认为是糟糕的风格）.

在大多数情况下，当性能是唯一的标准时，本机JavaScript方法比jQuery更好，但jQuery使用JavaScript并使开发更容易。您可以使用jQuery，因为它不会降低太多性能。在您的特定情况下，性能的差异是可以忽略的。

大多数情况下，本机JavaScript方法比jQuery更容易当性能是唯一的标准时，ve JavaScript方法是比jQuery更好的选择，但是jQuery使用JavaScript并使开发变得容易。您可以使用jQuery，因为它不会太大地降低性能。在您

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

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

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

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

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

$('#JQueryClick').click(function(){alert('1')})
$('#JQueryClick').click(function(){alert('2')})

$('#JQueryAttrClick').attr('onClick'," alert('1')" ) //This doesn't work
$('#JQueryAttrClick').attr('onClick'," alert('2')" )

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

<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>