jQuery - 元素检测的性能

Question

我正在读我的同事的代码,我想知道性能是否可以提高.对于任何按钮事件,都有类似的代码:

一个)

$("body").on("click", ".aButtonName", function() { ....});
$("body").on("click", ".aButtonName", function() { ....});
$("body").on("click", ".aButtonName", function() { ....});

....
$("body").on("click", ".aButtonName", function() { ....});

b)点击主体后,分析每个目标事件会更快吗？

  $(document.body).on('click', function( e ){

var trg = $(e.target).closest('button');
if(!trg || !trg.attr('class'))
  return;


if ( trg.attr('class').indexOf('my_button') > -1) {
  ....

Answer 1

它很可能会降低性能。在第二种情况下，您最终会执行回调函数、传递参数并执行几次 DOM 交互以退出。在第一个例子中，jQuery 执行选择器匹配，并且仅在匹配时才执行该函数。

在这两种样式中，一旦事件“冒泡”（传播）到body. 这种“委托风格”检查选择器是否与目标（或父级）匹配。

正如其他人所建议的，缓存$("body")将节省大量 DOM 查询，并且通过使用比body.