javascript - モジュール パターン変数の問題を明らかにする

Question

私は Web 開発に不慣れで、最近明らかにモジュール パターンを発見しました。しかし、JS に実装する際に問題が発生しています。

 var navigation = (function(){
    //chache DOM
    var $navBar = $('.navBar');
    var $navBtn = $('.navBar .btn');
    var $section = $('.section');
    var mobileNav = $('.navBarMobile');

    //bind events
    $('.navBar .btn').on('click', sectionScroll());
    //$navBtn.on('click', sectionScroll()); wouldn't run


    //select section via scroll pos.
    function selectScroll(){
        var windscroll = $(window).scrollTop();
        if (windscroll >= 10) 
        {
            $('.section').each(function(i)
            {            
                if ($(this).offset().top -200 <= (windscroll)) 
                {
                    $navBtn.removeClass('selected');
                    $navBtn.eq(i+6).addClass('selected');
                    $navBtn.eq(-i+5).addClass('selected');
                }
            });
        } 
     }

    //scroll to section via click
    function sectionScroll(e){
        e.preventDefault();

        var target = $(this).find('a').attr('data-scroll');
        var offset = $('[data-anchor=' + target +']').offset().top - 100;
        TweenMax.to($('html, body').stop(), 1, {scrollTop: offset, delay:     .36});  
    }

    return {
        selectScroll: selectScroll
    };

    })();

    var main = function () 
    {
        $(window).scroll(function() { navigation.selectScroll(); }).scroll();
    }; 
    $(document).ready(main);

私の selectScroll 関数では、「$navBtn」を「$('.navBar .btn')」に置き換えるまで正しく実行されませんでした。変数を宣言したときに何か間違ったことをしましたか?

また、sectionScroll 関数に置き換える $navBtn.on('click', sectionScroll()); と 、このエラーが発生し続けました: 未定義のプロパティ 'preventDefault' を読み取ることができません$('.navBar .btn').on('click', sectionScroll());

編集:このページの @Bergi のおかげで問題が見つかりました。私の質問は、このソリューションを明らかにするモジュールパターンと一緒に使用する最良の方法は何でしょうか? JS に defer 属性を設定することになるでしょうか:
<script type="text/javascript" src="js/app.js" defer></script> または、公開モジュール パターンを使用する場合のより良い解決策はありますか?