jQuery.click（） vs onClick

javascript jquery html dom-events jquery-events

2022-08-29 22:41:41

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

第一种方法

断续器

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

jQuery

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

第二种方法

断续器

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

JavaScript 函数调用

function divFunction(){
    //Some code
}

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

答案 1

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

基本上，以现代方式注册事件是处理事件的不显眼的方式。此外，要为目标注册多个事件侦听器，您可以调用同一目标。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

答案 2

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

我在Firefox 16.0 32位Windows Server 2008 R2 / 7 64位上做了一个测试

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

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

在 Chrome 22.0.1229.79 32 位 Windows Server 2008 R2 / 7 64 位上进行测试

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