Creating an event listener is simply a case of following a naming pattern:

bind('toolBar');

bind('tool', {

  onClickIcon: function(event) {
    // handle clicks on this.icon
  },

  onMouseOverToolBar: function(event) {
    // handle mouseovers on this.toolBar.element
  },

  onMouseDown: function(event) {
    // handle mousedowns on this.element
});

<div class="toolBar">
  <div class="tool">
    <a class="icon" href="#">Icon</a>
  </div>
</div>

Any method of the form onClickX is automatically treated as an event listener. That is, ‘on’, followed by the UI event type, followed by the capitalized name by which the target is assigned to the instance:

An event listener without a target name, such as onMouseDown applies to the component element (this.element). Note that you can create listeners where the target is manually assigned during run(), as well as for automatically assigned elements:

bind('login', {

  run: function() {
    this.user = this.element.elements.user;
  },
  
  onFocusUser: function() {
    // handles focuses on this.user  
  }
});

<form id="login">
  <input type="text" name="user" />
  <input type="password" name="pass" />
</form>

You can prevent the default browser behavior for an event from executing by returning false from an event listener. For example:

bind('forbidden', {

  onClick: function() {
    this.window.alert("You can't do that!");
    return false;
  }
});

... has the same effect as:

<a href="/secret" onclick="alert("You can't do that!"); return false;">Click me</a>