title: How to extend event delegation in javascript with module pattern?
body: <p>I am using module pattern in JavaScript. I have a file say controller.js which handles events. The problem is I want to use sub-modules. But since the events are handled in the controller.js how will I handle the event in the sub-module if any arises?<br>
  I dispatch a custom event called <code>PAGE_DISPLAYED</code> from another file say view.js. This event is listened by the controller.js and depending on the displayed page, it does other things, like binding additional event handler specific to that particular page. How to do this using sub-modules.  </p>
  
  <p>Sample code:</p>
  
  <pre><code>window.KDJ || (window.KDJ = {});    //namespace
  KDJ.controller = (function () {
      $(document).off('PAGE_DISPLAYED');
      $(document).on('PAGE_DISPLAYED', function (e, data) {
      switch(data.pageId) {
      case "page1":
          // do something..
          break;
      case "page2":
          // do something..
          break;
      }
      });
  
      return {
          // exported methods and props..
      };
  })();
  </code></pre>
  
  <p>How can I extend the above code and the event delegation? Or is the code architecture posing any restrictions.</p>
  
  <p>I am using jQuery Mobile and dispatching the <code>PAGE_DISPLAYED</code> event is done by listening to <code>pagechange</code> event:</p>
  
  <pre><code>window.KDJ || (window.KDJ = {});    //namespace
  KDJ.view = (function () {  
      // ...
      $(document).off('pagechange');
      $(document).on('pagechange', function (e, ui) {
          //...
          $(document).trigger(PAGE_DISPLAYED, {'pageId': loadedPageId, 'key': key});
      });
  })();
  </code></pre>
  
  <p>Thanks.</p>