当一次将事件绑定到多个元素时，每个元素的新实例？

Question

我的页面中有 100 个按钮（每个按钮都有 class='btn'）。

我还有一个单个按钮，它准备所有其他 100 个按钮。

<input type='button' onclick='bindTheClickevent()' />

当按下时， - 它调用 bindTheClickevent() - （将点击事件绑定到所有其他 100 个事件）。

在脚本部分，我放置了：

function bindTheClickevent ()
{
        $(".btn").bind('click',function () {
          $(this).css('color','red');
         });
}

问题

1）在内存中，匿名函数有多少实例< em>创建了？

2) 在内存中，bindTheClickevent() 函数是否会空闲（GC）？ - 请注意，绑定是在 bindTheClickevent 函数内部调用的...

3) 何时，最终 - bindTheClickevent 函数将被释放给GC？

现在让我们进行更改

function bindTheClickevent ()
    {
            $(".btn").bind('click',function () {
              changeColor($(this));
             });
    }

function changeColor(obj)
{
 $(obj).css('color','red');
}

- 更改后

1）如果我这样做有什么区别吗？

2) 在内存中，创建了多少匿名函数实例？

3) bindTheClickevent() 函数是否会免费 (GC) ？ - 请注意，Bind 在内部调用 bindTheClickevent 函数...

Answer 1

“1）在内存中，创建了多少个匿名函数实例？”

哪个匿名函数？

对于内联 onclick，您将获得一个分配给元素的 onclick 属性的函数，如下所示：

function(event) {

    bindTheClickevent();

}

... 或类似的函数，具体取决于实现。当取消引用该元素或从 onclick 属性取消引用该函数时，该函数将免费用于 GC。

关于 jQuery 代码：

$(".btn").bind('click',function () {
    $(this).css('color','red');
});

...虽然匿名函数是共享的，但您看不到的是，如果相关元素尚未绑定 jQuery 处理程序，则 jQuery 将在内部创建每个元素都有一个独特的功能。

该内部处理程序实际上是绑定到元素的，当元素接收到事件时，将调用该处理程序，分析该事件，并调用您最初传递的处理程序（如果需要）。

这意味着100 个 jQuery 绑定元素等于 101 个唯一的函数实例。

为了确保使用 jQuery 绑定的任何处理程序都被 GC 处理，您需要确保始终使用 jQuery 来删除 DOM 元素。如果不这样做，存储在 jQuery.cache 中的所有数据（包括处理程序）都不会被清理，因此它们将始终通过全局 jQuery 引用> 命名空间。

---

编辑：

假设有 100 元素具有类 btn，并且没有任何由 jQuery 绑定的处理程序，则以下代码：

$(".btn").bind('click',function () {
    $(this).css('color','red');
});

...将创建 101 个唯一的 Function 实例。

为什么101？

好吧，jQuery 所做的是第一次将处理程序绑定到元素时，它会在内部为每个元素创建一个唯一通用处理程序。这是事件发生时实际调用的处理程序，并处理所有事件类型。

您的处理程序函数从未实际绑定到该元素。

因此，通用内部处理程序在调用时将分析发生的事件，并查看是否有任何处理程序与该元素关联 。使用与该事件类型匹配的 .bind() 给定元素。如果是这样，它会调用传递的处理程序。

现在假设您绑定另一个处理程序：

$(".btn").bind('mouseenter',function () {
    $(this).css('color','blue');
});

...由于我们绑定到相同元素，因此它们已经具有必要的内部处理程序并且不需要创建另一个处理程序。因此，所发生的只是您传递的函数在内部被引用，并在需要时由通用内部处理程序调用。

因此，根据上面的代码片段，现在存在 102 个唯一的 Function 实例。

Answer 2

看起来在这两种情况下都只创建了一个函数实例。看起来好像对匿名函数的引用被附加为每个元素的事件处理程序。

示例 - 使用闭包显示按钮事件处理程序之间的范围共享。

请注意，如果涉及闭包，这可能会导致有趣的行为，因为所有元素将共享相同的函数（和闭包范围）。

不，您声明的函数不会因为其全局作用域而被 GC。

此外

要独立附加它们（不是通过引用），请使用 .each() 循环选定的元素并单独附加函数。

示例

$('.btn').each(function() {
    $(this).bind('click',function() {
        // each '.btn' has it's own copy of
        // this anonymous function
    }
});

Answer 3

如果您执行以下操作：

for (someiterations)
{
    $(myobj).bind("click",function()
    {
        // ...bla...
    });
}

在这种情况下，您每次迭代都会创建一个新函数。
在你的函数中，这种情况不会发生，因为你将函数传递给参数，所以有一个地方存储了它的引用（是的函数参数），它将执行如下操作：

for (iterations)
{
    myob.addEventHandler(event, funcref);
}

所以应该是好吧，现在：

1. 不这么认为，但不确定语法。
2. 1正如我所解释的，
3. 否，因为它在全局范围内，并且没有分配给实例，您可以将其视为常量，而不是变量

注意：匿名函数不会被释放，它是由事件处理程序引用。