click () против live () против onclick (много делений) в jQuery

Question

У меня есть список с 200 делениями,

<div id="sId_1" class="sDiv"></div>
<div id="sId_2" class="sDiv"></div>
....
<div id="sId_200" class="sDiv"></div>.

Что из следующих двух быстрее?

-- each loop -- with i++;
    <div onclick="callSomeFunction('click');" id="sId_'+i+'" ></div> 
-- each loop --


-- each loop -- with i++;
    $('#sId_'+i+'').click( function (event) ....
-- each loop --


$('.sDiv').click( function (event) ......

Это первое решение?Поскольку jQuery создает объект в $ .cache для каждого div.

PS: является ли объект с более чем 1000 записями проблемой для JavaScript?

Answer 1

Вы можете использовать делегирование событий, чтобы прикрепить один «умный» обработчик событий к подходящему родительскому контейнеру:

$("#parent").delegate("div[id^='sId']", "click", function() {
    // do something
});

Преимущества вышеуказанного подхода:

• Только один обработчик событий.
• Может быть присоединен к объекту jQuery, а не к селектору, который делает .delegate звонки цепочечными.
• Работает для будущих элементов, таких как добавленные через JS / Ajax.
• Вы можете остановить распространение / всплытие событий, поскольку они всплывают только до родителя, а не элемента document, как в случае с .live.

Справка:

http://api.jquery.com/delegate/

Answer 2

Первый самый быстрый, но он будет стоить вам с размером страницы.

Второй нужно исправить, потому что вы не будете делать это до 100 делений.

Таким образом, вы можетесделайте каждый div классом, который вы затем назовете следующим образом:

$(".divPRessable").click( ...

Последний будет быстрее, только если вы собираетесь вводить div в DOM (самый медленный).