Как лучше ставить обработчики?

Question

[Extramezz]

Ниже приведу 2 примера кода. Мне интересно - какому стилю лучше следовать и почему - заботится об оптимизации затрат памяти или же скорости работы кода?

1 вариант:
Как я понимаю, самый плохой со стороны оптимизации потребления памяти, т.к браузер должен будет хранить в памяти все установленные обработчики + локальные переменные из замыкания выше, которые они используют. Но зато, при каждом клике не требуется время на поиск $yetElem и $parent.

function doSmething($elems){
      
$elems.each(function(){
   var $this = $(this), $parent = $this.parent(), $yetElem = $this.find(".something");

   $this.click(function(){
        //Какие-то действия с $parent и $yetElem, много действий. Такая нехилая кучка кода
   });   
});

}

Вариант 2:
На все элементы набора будет навешан 1 и тот же обработчик, т.е по идее, память будет засорена меньше. Но, теперь при каждом клике нужно будет искать $parent и $yetElem.

function doSmething($elems){
      function _onClick(){
          var $this = $(this), $parent = $this.parent(), $yetElem = $this.find(".something");
          //Действия с $parent и $yetElem  
      }

      $elems.click(_onClick);   
});

}

Варианты грубые, но смысл, думаю, понятен. Про делегирование событий мне тут не нужно - это совершенно другой случай. В $elems могут быть совершенно разнообразные элементы.

Comments

[everliving]

Думаю тут лучше почитать про делегирование событий.

Answer 1

[Юрий]

если элементов много, то правильнее

$(document).on('click', '.selector', function() {
   var $this = $(this); // куда кликнули
});

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