javascript - jQuery .on() 或 JavaScript :function()?

Question

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

但是，我想知道，只要事件处理程序是 click，在可能的情况下，依赖旧的 javascript:function() 调用函数是否会更有效.

这是一个例子。

我从服务器获取一个链接元素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 中，相同的代码可以工作，如果使用 href 完成，在 Safari 中也是如此="javascript:doMoreStuff().

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

Answer 1

javascript:doMoreStuff() 与 onclick="doMoreStuff()" 一样糟糕，甚至更糟。你缺乏灵 active ，如果未启用 JS，则无法回退，而且据我所知， javascript: 伪协议(protocol)甚至不兼容。

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

至于效率，我认为您不会注意到差异。 .on 的效率稍低，因为点击事件必须遍历 DOM 树来确定是否应该触发该事件，但这只是很小的事情。