2

我正在处理一些使用对服务器的 ajax 调用构建的页面，因此我依赖于.on()将事件处理程序附加到新项目。

但是，我想知道，javascript:function()只要事件处理程序是click.

这是一个例子。

我从服务器得到一个链接元素a：

<a href="javascript:doMoreStuff()" class="classThatDoesMore">Do More!</a>

我将它插入到文档中，如下所示：

// ajax call and so
$(this).html(response);

为了“做更多”，我有两种方法（可能还有其他方法，但我不知道，但欢迎提出任何建议！）：

$(document).on("click",".clssThatDoesMore",function(){ // I need (document)
     // here something will be done
});

或者

doMoreStuff(){
    // here something will be done as well
}

据我所知，这两种解决方案几乎都是跨浏览器的（我已经测试过href="javascript:function()"，至少可以追溯到 IE8），但如果我错了，请告诉我！

我想知道过多的.on()“侦听器”是否会对浏览器造成很大的负载，因此是否最好依赖javascript:function()，或者相反，.on()是否根本不需要太多资源并且.on()在页面中有多个侦听器不是问题。

PS 我已经放弃了onclick="doMoreStuff()"，因为在 Safari 中它不起作用，而在 FF 中，相同的代码是相同的，如果使用 e 完成，在 Safari 中也是如此href="javascript:doMoreStuff()。

PPS这不是同一个老问题js v.jquery，对我来说，重点不是一般来说哪个更有效，我想了解实现这一特定任务的最佳方式是什么:-)

4

2 回答 2

6

javascript:doMoreStuff()和 一样糟糕，如果不是更糟的话onclick="doMoreStuff()"。您缺乏灵活性，如果未启用 JS，则没有回退，并且据javascript:我所知，伪协议甚至不兼容。

让我们忘记效率，只关注.on更清洁的事实。您可以将其从 html/ajax 中分离出来，并且非常简单地查看您在做什么并稍后进行更改。

至于效率，我认为您不会注意到差异。 .on效率要低得多，因为单击事件必须稍微遍历 DOM 树才能确定事件是否应该触发，但这是非常小的土豆。

于 2013-01-22T16:41:39.113 回答
1

在文档树顶部附近附加许多委托事件处理程序会降低性能。每次事件发生时，jQuery 必须将该类型的所有附加事件的所有选择器与从事件目标到文档顶部的路径中的每个元素进行比较。为了获得最佳性能，请将委托事件附加到尽可能靠近目标元素的文档位置。避免过度使用 document 或 document.body 来处理大型文档的委托事件。

来自http://api.jquery.com/on/#event-performance

只是为了增加我的两分钱，我会更多地关注我的回调函数的性能而不是它们的数量。内存很便宜，除非您达到疯狂数量的事件处理程序（100 个），否则您不会看到任何基于它们的数量的性能影响。

于 2013-01-22T17:09:47.833 回答