Question

我正在处理一些使用对服务器的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()，或者恰恰相反，{ {1}}根本不需要太多资源，并且页面中有多个.on()侦听器不是问题。

PS我放弃了.on()，因为在Safari中它不起作用，而在FF中，相同的代码是如此，如果在onclick="doMoreStuff()"进行操作，则在Safari中也是如此。

PPS这不是同一个老问题js v.jquery，对我而言，一般来说这不是更高效的问题，我想了解这个特定任务可以实现的最佳方式:-)

Answer 1

javascript:doMoreStuff()与onclick="doMoreStuff()"一样糟糕，甚至更糟。如果没有启用JS，你就缺乏灵活性，没有后备，而javascript:伪协议甚至不符合我的理解。

让我们忘记效率，只关注.on更清洁的事实。你可以把它从html / ajax中分离出来，看你正在做什么并稍后改变它很简单。

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

Answer 2

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

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