jQuery.click()与onClick

2020/09/24 03:41 · javascript ·  · 0评论

我有一个庞大的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 内部使用addEventListenerattachEvent)。

基本上,以现代方式注册事件处理事件简便方法。另外,要为目标注册多个事件侦听器,您可以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(function(){
      //Some code
 });

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

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

恕我直言,仅当满足以下条件时,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属性来避免这种情况。

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

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

更不用说您应该分开关注:JavaScript和布局应该分开!

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

(此外,其他所有人都在说。)

两种方法都可以用于不同的目的,这两者都不是更好的选择onClick(实际上应该是onclick)性能稍好一些,但是我非常怀疑您会注意到那里的区别。

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

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

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

好吧,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
});

性能

但是,这里已经有很多不错的答案,作者有时会提到性能,但实际上还没有人对此进行研究-因此,在这里我将重点关注这一方面。今天,我在Chrome 83.0,Safari 13.1和Firefox 77.0上进行测试,以了解有问题的解决方案以及其他替代解决方案(其中一些在其他答案中也有提及)。

结果

我在这里比较解决方案AH,因为它们在元素上运行id我还将显示使用class(I,J,K)作为参考的解决方案的结果

  • 基于html内联处理程序绑定(B)的解决方案对于Chrome来说是最快,最快的,对于少量元素来说也是最快的
  • 基于getElementById(C,D)的解决方案速度很快,并且对于Safari和Firefox上的大量元素而言最快
  • 基于引用的解决方案I,J对于大量元素最快,因此在这种情况下值得考虑使用class替代id方法
  • jQuery.click(A)的解决方案最慢

在此处输入图片说明

细节

对于这个问题,实际上设计性能测试并不容易。我注意到,对于所有经过测试的解决方案,用于10K div-s的触发事件的性能都是很快的,并且手动无法检测到它们之间的任何差异(您可以在以下代码段中运行以自行检查)。因此,我主要关注两种情况下生成html和绑定事件处理程序的执行时间

  • 10 div秒-您可以在此处运行测试
  • 1000 div秒-您可以在此处运行测试

这是Chrome的示例测试

在此处输入图片说明

本文地址:http://javascript.askforanswer.com/jquery-clickyuonclick.html
文章标签: ,   ,   ,   ,  
版权声明:本文为原创文章,版权归 javascript 所有,欢迎分享本文,转载请保留出处!

文件下载

老薛主机终身7折优惠码boke112

上一篇:
下一篇:

评论已关闭!