title: Handling event binding and callbacks within actions in Ember
body: <p>This Smells. The result of this action should register an event handlers on the page, but should I put the named function callbacks (clickHandler)? A mixin? or perhaps another class entirely.</p>
  
  <pre><code>App.StepController = Ember.ObjectController.extend({
      actions: {
          captureStep: function() {
  
              //Bind the handler to this so callback has access to Controller properties
              var clickHandler = clickHandler.bind(this);
  
              //Can't do this with jquery, as capture is not cross browser compatible.
              //Setting capture to true on a body event makes this event fire before all others                
              if (document.body.addEventListener) {
                  document.body.addEventListener('click', clickHandler, true);
              }
  
              function clickHandler(event) {
                  event.preventDefault(); //Needed for links/buttons
                  event.stopImmediatePropagation(); //Stop the event from bubbling and prevent 'same element' event handlers 
  
                  //Determine clickTarget...
  
                  console.log("Clicked: " +  clickTarget);
                  this.set('model.targetPath', clickTarget);
  
                  // remove this handler from the body
                  document.body.removeEventListener(event.type, clickHandler, true);
              }
          }
      }
  });
  </code></pre>