title: How to pass event target to a function
body: <p>I am trying to modularize the following javascript but I have a problem to pass the event target. The function open was inside the the $('.myImg').on('click', function (event) { ...}.
  I can't get it working.</p>
  
  <p>Any Input would be appreciated. </p>
  
  <pre><code>var Modal = function () {
      var modal = document.getElementById('myModal'),
          modalcontent = document.getElementById('modal-img-content'),
          close_btn = document.getElementsByClassName("close")[0],
          img = document.getElementsByClassName('.myImg'),
          modalImg = document.getElementById("img01"),
          visible = false;
  
          function getScrollBarWidth () {
              var $outer = $('&lt;div&gt;').css({visibility: 'hidden', width: 100, overflow: 'scroll'}).appendTo('body'),
                  widthWithScroll = $('&lt;div&gt;').css({width: '100%'}).appendTo($outer).outerWidth();
              $outer.remove();
              return 100 - widthWithScroll;
          }
  
          function open(event){            
              visible = true;
              modal.style.display = "block";
              document.getElementsByTagName("BODY")[0].style.overflow = "hidden";    
              modal.style.overflow = "auto";
              var newSrc = this.src;
              var caption = this.alt;
              modalImg.setAttribute('src', newSrc);
          }
          return {
              getScrollBarWidth : getScrollBarWidth,
              open : open
          }
  }();
  
  $('.myImg').on('click', function(event) {
      event.stopPropagation();
      Modal.open(event);
  });
  </code></pre>