对许多元素使用bind()方法是不是一种糟糕的做法

Question

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

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

我在过去学到了一个建议，即示例1的方法不利于性能/内存(我记不起确切的原因(，因为每个元素都侦听一个独立的匿名函数。这个建议说，最好命名事件处理程序，然后让所有元素都侦听命名的事件处理程序

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一样糟糕？

Answer 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);