Сколько элементов требуется для того, чтобы делегирование событий стало целесообразным?

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

Событие делегирования имеет две основные цели:

позволяет обработчикам работать с элементами, которые еще не были созданы/вставлены в DOM.
привязка одной функции к общему элементу-предшественнику, а не к нескольким элементам sibling

Мой вопрос о втором из них. Общий ответ, вероятно, будет "зависит от конкретной ситуации", но мне интересно, есть ли правило или способ бенчмаркинга, чтобы проверить это.

Итак, возникает вопрос: сколько элементов вам нужно, прежде чем преимущества производительности делегирования событий превысят затраты на производительность?

Ответ 1

Предполагая эту структуру HTML:

<ul id="navUL">
    <li><a href="one.html">One</a></li>
    <li><a href="two.html">Two</a></li>
    <li><a href="three.html">Three</a></li>
</ul>

Просто чтобы очистить вещи (для меня).... Согласно документам jQuery (http://api.jquery.com/delegate/):

$("#navUL").delegate("a", "click", function(){
    // anchor clicked
});

... эквивалентно этому:

$("#navUL").each(function(){
    $("a", this).live("click", function(){
        // anchor clicked
    });
});

Однако делегирование событий (как я знаю):

$("#navUL").click(function(e) {
    if (e.target.nodeName !== "A") { return false; }
    // anchor clicked
    // anchor is referenced by e.target
});

Итак, вы поймаете событие click на элементе UL, а затем выясните, какой якорь на самом деле щелкнул через свойство event.target.

Я не знаю о методе delegate(), но этот последний метод всегда должен быть быстрее, чем привязывать обработчики событий к каждому якорю в элементе #navUL, например:

$("#navUL a").click(function() {
    // anchor clicked
    // anchor is referenced by the this value
});