One of the most difficult tasks in any software is responding to user events properly. On the surface it may seem trivial, but we quickly find that there are many context-specific variables that need to be considered.

First, there is the matter of efficiently listening to events within a complex and dynamic UI. In SproutCore, we do this via the root responder object, SC.RootResponder, which acts as the sole listener for all the user events. Having a single listener is much easier and faster than manually adding the many mouse, touch, keyboard, and other event listeners directly to each element. If we did try to manage the events per view, we would have to write a lot of extra code and in turn, would lose performance and possibly introduce memory leaks as the dynamic UI changes.

Instead, as the sole event listener, SC.RootResponder is able to direct events to the proper responder object, which may not necessarily even be a view. The way it works is that each browser event that occurs (mousedown, touchstart, keydown, and so on) has a corresponding action (mouseDown, touchStart, keyDown, and so forth) that can be implemented on a target. If the target implements the action, the event will stop. If the target doesn't implement the action, the event will continue to bubble up to the next responder. In this way, we can create our own responder chains to handle events efficiently.

For our purpose right now, we'll leave the discussion on responder chains since the view responder chain is set up automatically for us and we can simply focus on which actions we want to handle in our custom views. For example, let's create an extremely basic button view that will respond to mouse events:

MyApp.MyButtonView = SC.View.extend({

  mouseDown: function (evt) {
    // Indicate that we handled the event.
    return true;
  },

  mouseUp: function (evt) {
    // Perform some action ...

    // Indicate that we handled the event.
    return true;
  }

});

That is all there is to it. By implementing mouseDown and mouseUp, our view's action will be called whenever the user clicks on its element. If we also want to handle other events, such as touch and key presses, we would simply add the appropriate actions (for example, touchStart, touchEnd, and keyDown).

However, as I had alluded in the beginning of this section, handling events and properly handling events are two vastly different things. I'm afraid our simple button view is far too simple to be of much use right now. This is because it's not taking into consideration several other factors such as whether the view was enabled, whether the mouse was dragged out of the element, whether any modifier keys were pressed, or even which mouse button was clicked. For now, you should be aware of the basics and if you want to explore custom view event handling in more depth, you should check out the source code of some of the built-in SproutCore controls such as SC.ButtonView and SC.TextField.