Могу ли я улучшить производительность jQuery, объединив все события одного типа в один обработчик?

Question

У меня есть сайт/приложение jQueryMobile, в котором производительность является проблемой. Я читаю много о том, как разумно не связывать слишком много отдельных обработчиков. Так что если у вас есть страница с большим количеством кнопок, совет, чтобы связать как это ...

$(document).on('click',function(){ 
    if (this = $('#button1')){ 
     //Handler for button one 
    } else if (this = $('#button2') { 
     //etc 
    } else //etc 
}) 

... а не как это ...

$('#button1').click(function(){ 
    //Handler for button one 
}) 
$('#button2').click(function(){ 
    //Handler for button two 
}) 
//etc 

Так что я интересно насколько это действительно полезно.

Что делать, если я сделал один слушатель для всех событий 'pageshow' в моем документе? (веб-сайт jQueryMobile представляет собой единый документ, содержащий много страниц, и многие из этих страниц нуждаются в небольшом количестве показов).

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

Answer 1

Ваш первый вариант быстрее установить и инициализировать, но медленнее работать, когда происходит событие.

Если у вас были сотни кнопок со всей почти идентичной обработкой событий, может возникнуть смысл только установить один обработчик событий для всех из них, а не запускать код для установки сотен обработчиков событий. Но вы по-прежнему будете платить небольшое штрафное вознаграждение, когда произойдет определенное событие.

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

Кроме того, оператор if в первом варианте никогда не будет работать по нескольким причинам. Он должен был бы быть что-то вроде этого:

$(document).on('click',function(e) { 
    if (e.target.id == 'button1') { 
     //Handler for button one 
    } else if (e.target.id == 'button2') { 
     //etc 
    } 
}) 

И, в любое время вы используете делегированного обработку событий, то лучше выбрать общий родительский для кнопок, что гораздо ближе к реальным объектам, чем document объекта (помогает выполнения представление).

$("#buttonContainer").on('click',function(e) { 
    if (e.target.id == 'button1') { 
     //Handler for button one 
    } else if (e.target.id == 'button2') { 
     //etc 
    } 
}) 

Если вы хотите только щелчков кнопок с обработкой делегированных событий, вы можете использовать некоторые из delgation функций, встроенной в .on() как этот

$("#buttonContainer").on('click', 'button', function(e) { 
    if (this.id == 'button1') { 
     //Handler for button one 
    } else if (this.id == 'button2') { 
     //etc 
    } 
}) 

Answer 2

Рекомендация: использовать event delegation. Фактически вам не нужно связывать этот «мастер-обработчик событий» с document или document.body, вы можете (и должны) привязать его к ближайшему возможному узлу, который разделяют все кнопки.

$('#ClosestSharedParent').on('click', 'button', function(event) { 
    // "this" references the button that was actually clicked 
    switch(event.id) { 
     case 'button1': 
      alert('button1 clicked'); 
      break; 
     case 'button2': 
      alert('button2 clicked'); 
      break; 
     // and so on 
    } 
}); 

Второй аргумент .on() принимает селектор, в котором можно указать, какие элементы вы хотите делегировать события для. В более старой версии jQuery это было выполнено с помощью метода .delegate().

Ref .: .one(), .delegate()