JQuery - когда привязка события к нескольким элементам одновременно, новый экземпляр для каждого элемента? - PullRequest
Новая
       11

JQuery - когда привязка события к нескольким элементам одновременно, новый экземпляр для каждого элемента?

3 голосов
/ 06 октября 2011

У меня есть 100 КНОПКИ на моей странице (каждая из них имеет class = ' btn ').

Также у меня есть одна кнопка , которая готовит все другие 100 кнопки. 

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

при нажатии, - он звонит bindTheClickevent () - (который связывает событие щелчка со всеми 100 другими). ​​

В разделе сценариев я поставил: 

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

Вопросы

1 ) В памяти , сколько instances из anonymous function created?

2 ) В памятифункция bindTheClickevent () когда-нибудь будет be free (GC)?- обратите внимание, что Bind называется внутри функцией bindTheClickevent ...

3 ) Когда , в конечном итоге - bindTheClickevent функция will be free to GC?

Позволяет внести изменения 

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

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

сейчас - после изменения

1 ) Есть ликакая разница, если я это сделаю?

2 ) В памяти , сколько instances из anonymous function составляют created?

3 ) Будет ли функция bindTheClickevent () когда-либо be free (GC)?- обратите внимание, что Bind называется внутри функцией bindTheClickevent ...

Ответы [ 3 ]

3 голосов
/ 06 октября 2011

"1) Сколько экземпляров анонимной функции создано в памяти?"

Какая анонимная функция?

Для встроенного onclick вы получаете функцию, назначенную свойству onclick элемента, например: 

function(event) {

    bindTheClickevent();

}

... или подобное в зависимости от реализации.Эта функция будет свободна для GC, когда элемент разыменовывается или функция разыменовывается из свойства onclick.

В отношении кода jQuery: 

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

... whileанонимная функция является общей, но вы не видите, что если рассматриваемые элементы еще не имеют привязанного обработчика jQuery, jQuery внутренне создаст уникальную функцию для каждого элемента.

Этот внутренний обработчик - это то, что на самом деле связывается с элементом, и когда элемент получает событие, этот обработчик вызывается, анализирует событие и вызывает обработчик, который вы изначально передали (еслинеобходимо).

Это означает, что 100 jQuery-связанных элементов равно 101 уникальному экземпляру функции .

Чтобы убедиться, что все обработчики, связанные с использованием jQuery, являются GC'd, вам необходимо убедиться, что вы всегда используете 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 unique Functionэкземпляры.

3 голосов
/ 06 октября 2011

Похоже, что только один экземпляр функции создается в обоих случаях.Похоже, что Ссылки на анонимную функцию прикреплены в качестве обработчиков событий для каждого элемента.

Пример - Использование замыкания для отображенияразделение области видимости между обработчиками событий кнопки.

Обратите внимание , что это может вызвать интересное поведение, если вы используете замыкания, потому что все элементы будут использовать одну и ту же функцию (и область замыкания).

И нет, ваши объявленные функции не будут GC'd из-за их глобальной области видимости.

Дополнительно

Чтобы присоединить их независимо (не по ссылке), обведите выбранные элементы с помощью .each() и добавьте функцию по отдельности.

Пример 

$('.btn').each(function() {
    $(this).bind('click',function() {
        // each '.btn' has it's own copy of
        // this anonymous function
    }
});
0 голосов
/ 06 октября 2011

Если вы делаете что-то вроде этого: 

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

В этом случае вы создаете новую функцию на каждой итерации.В вашей функции этого не происходит, потому что вы передаете функцию параметру, поэтому есть место, где хранится ее ссылка (да, параметр функции), которая будет делать что-то вроде этого: 

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

Так что теперь все должно быть в порядке:

  1. Не думаю, что не уверен в синтаксисе.
  2. 1, как я объяснил
  3. Нет, поскольку он находится в глобальной области видимости и не назначен экземпляру, его можно рассматривать как константу, а не как переменную

Примечание: Анонимная функция не будетбыть освобожденным, на него ссылается обработчик события.

...