弾窓イベントをバインドする最良の方法、原生JSとJQueryの方法

jQueryの使用

ui = {

        $close: $('.close')

      , $pop: $('.pop')

      , $topopBtn: $('.topop-btn')

      , $popbtnArea: $('.popbtn-area')

    };

//       

      ui.$popbtnArea.on('click','.topop-btn',function(){

      ui.$pop.eq($(this).index()).show();

      })

      //     

      ui.$close.on('click',function(){

      ui.$pop.hide();

      });

オリジナルJSコード

ui.$pop = document.getElementsByClassName('pop');

ui.$topopBtn = document.getElementsByClassName('topop-btn');

ui.$close = document.querySelectorAll('.close');



for(var i=0;i<ui.$topopBtn.length;i++){

        ui.$topopBtn[i].index = i;

}

      //     

      for(var i=0;i<ui.$topopBtn.length;i++){

        ui.$topopBtn[i].onclick = function(){

          ui.$pop[this.index].style.display = 'block';

        }

      }

      // close    

      for(var i=0;i<ui.$close.length;i++){

        ui.$close[i].onclick = function(){

          this.parentNode.style.display = 'none';

        }

      }

エラーやより良い方法でコメントを歓迎します