对许多元素使用 bind() 方法是一种不好的做法吗？

如何解决对许多元素使用 bind() 方法是一种不好的做法吗？

假设我的页面中有很多弹出窗口（比如超过 30 个），我需要让它们监听点击事件处理程序。下面是 jQuery 语法中的示例 1：

$('.popup').on('click',function () {
    // do something
});

我在过去了解到一个建议，即示例 1 方法对性能/内存不利（我不记得确切原因），因为每个元素都侦听独立的匿名函数。并且建议说最好给事件处理器命名，然后让所有元素都监听命名的事件处理器，如下例2：

function clickEventHandler() {
    // do something
}

$('.popup').on('click',clickEventHandler);

现在，对于每个弹出窗口，我需要将一个特定于弹出窗口的变量传递到指定的事件处理程序中。我想到的方法是使用 .bind() 方法，如下例 3 所示：

function clickEventHandler(someInfo) {
    // do something
}

$('.popup').each(function () {
    $(this).on('click',clickEventHandler.bind(null,$(this).attr('data-some-info')));  
});

但是，我担心 .bind() 方法的描述说：

bind() 方法创建一个新函数...

我的问题是：“创建一个新函数”究竟是什么意思？是不是意味着每次使用该方法时都要创建一个独立的匿名函数，并且在性能/内存方面与示例1一样糟糕？

解决方法

方法 1 很好 - 您只需创建一个函数，并将其传递给每个事件处理程序。

现在，如果你有类似的东西

$('.popup').each(function() {
  $(this).on('click',function () {
    // do something
  });
});

那确实有点浪费，因为您将为循环中的每次迭代创建一个新的回调函数。

但是

假设我的页面中有很多弹出窗口（比如超过 30 个）

30 对于现代硬件来说绝对算不上什么。现在，如果您有一千或一万，那么可能需要考虑一些事情。

我的问题是：“创建一个新函数”究竟是什么意思？是不是意味着每次使用该方法时都要创建一个独立的匿名函数，并且在性能/内存方面与示例1一样糟糕？

示例 1 很好 - 但在循环中调用 .bind 有点类似于我上面的代码段，其中内存中有许多单独的函数。

实现你想要的：

1. 使用事件委托（可选 - 这样您只需将单个侦听器附加到父级，而不是 每个元素的监听器）
2. 检查处理程序内部而不是外部的属性

function handleClick(e) {
    const someInfo = this.dataset.someInfo;
    // rest of function
}

$(document.body).on('click','.popup',handleClick);