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

Question

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

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

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

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

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

Answer 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.

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

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