javascript - 一次将事件绑定(bind)到多个元素时，每个元素的新实例？

Question

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

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

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

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

在脚本部分我放了:

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

问题

1) 在内存中，匿名函数有多少个实例被创建?

2) 在内存中，bindTheClickevent() 函数是否永远空闲 (GC)？ - 请注意 Bind 在 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) In memory , how many instances of the anonymous function are created ?"

哪个匿名函数？

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

function(event) {

    bindTheClickevent();

}

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

关于 jQuery 代码:

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

...虽然匿名函数是共享的，但您看不到的是，如果相关元素尚未绑定(bind) jQuery 处理程序，jQuery 将在内部为每个元素。

那个内部处理程序是实际上绑定(bind)到元素的，当元素接收到一个事件时，该处理程序被调用，分析该事件，并调用您最初传递的处理程序(如果需要) .

这意味着 100 个 jQuery 绑定(bind)元素等于 101 个独特的函数实例。

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

---

编辑:

假设有 100 元素具有 btn 类，没有任何由 jQuery 绑定(bind)的处理程序，则此代码:

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

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

为什么是 101？

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

您的处理函数从不实际绑定(bind)到元素。

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

现在假设您绑定(bind)了另一个处理程序:

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

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

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