Сравнение использования памяти браузера: встроенный onClick и использование JQuery .bind ()

У меня есть ~ 400 элементов на странице с привязанными к ним событиями щелчка (4 различных типа кнопок по 100 экземпляров каждой, события щелчка каждого типа выполняют та же функция, но с другими параметрами).

Мне нужно свести к минимуму любое влияние на производительность, которое это может иметь. Какое снижение производительности я получаю (память и т. Д.), Привязывая события щелчка к каждому из них по отдельности (с помощью JQuery bind () )? Было бы более эффективно иметь встроенный onclick , вызывающий функцию на каждой кнопке?

Отредактируйте для пояснения:):
На самом деле у меня есть таблица (сгенерированная с помощью JQGrid), и в каждой строке столбцы данных, за которыми следуют 4 столбца значков «кнопка» - удалить и три другие бизнес-функции, которые выполняют обратные вызовы AJAX на сервер:

|id|description|__more data_|_X__|_+__|____|____|
-------------------------------------------------
| 1|___data____|____data____|icon|icon|icon|icon|  
| 2|___data____|____data____|icon|icon|icon|icon|   
| 3|___data____|____data____|icon|icon|icon|icon|   
| 4|___data____|____data____|icon|icon|icon|icon|    

Я использую специальный форматировщик JQGrid ( http://www.trirand.com/jqgridwsiki/doku.php?id=wiki:custom_formatter ) для создания значков «кнопок» в каждой строке (я не могу получить HTML-код кнопки с сервера).

Именно здесь, в моей пользовательской функции форматирования, я могу легко создать HTML-код значка и код во встроенном onclick , вызывая соответствующие функции с соответствующими параметрами (данными из других столбцов в этой строке). Я использую данные в столбцах строк в качестве параметров для своих функций.

    function removeFormatter(cellvalue, options, rowObject) {       
        return "";
    }

Итак, я могу придумать два варианта:
custom_formatter ) для создания значков «кнопок» в каждой строке (я не могу получить HTML-код кнопки с сервера).

Именно здесь, в моей пользовательской функции форматирования, я могу легко создать HTML-код значка и код во встроенном onclick , вызывая соответствующие функции с соответствующими параметрами (данными из других столбцов в этой строке). Я использую данные в столбцах строк в качестве параметров для своих функций.

    function removeFormatter(cellvalue, options, rowObject) {       
        return "";
    }

Итак, я могу придумать два варианта:
custom_formatter ) для создания значков «кнопок» в каждой строке (я не могу получить HTML-код кнопки с сервера).

Именно здесь, в моей пользовательской функции форматирования, я могу легко создать HTML-код значка и код во встроенном onclick , вызывая соответствующие функции с соответствующими параметрами (данными из других столбцов в этой строке). Я использую данные в столбцах строк в качестве параметров для своих функций.

    function removeFormatter(cellvalue, options, rowObject) {       
        return "";
    }

Итак, я могу придумать два варианта:
1) inline onclick , как я объяснил выше
--или -
2) delegate () (как указано в ответах ниже (большое вам спасибо!))

  1. Создайте изображение значка (каждый тип значка имеет собственное имя класса) с помощью настраиваемого модуля форматирования .
  2. Задайте для значка data () его параметры в событии afterInsertRow JQGrid.
  3. Примените обработчик delegate () к кнопкам определенных классов (как сказал @KenRedler ниже)
>    $('#container').delegate('.your_buttons','click',function(e){  
>      e.preventDefault();  
>      var your_param = $(this).data('something'); // store your params in data, perhaps  
>      do_something_with( your_param );  
>    }); //(code snippet via @KenRedler)

Я не уверен, насколько интенсивно используется браузер вариант № 2, я думаю ... но я мне нравится держать Javascript подальше от моих элементов DOM :)

6
задан icats 14 March 2011 в 21:38
поделиться