example.html

<style>
  body {
    padding: 50px;
    font: 14px Helvetica;
  }
  ul li {
    padding: 5px;
    cursor: pointer;
  }
  ul li:hover {
    background: #eee;
  }
</style>

<ul>
  <li>One <a href="#">remove</a></li>
  <li>Two <a href="#">remove</a></li>
  <li>Three <a href="#">remove</a></li>
</ul>

<a href="#" onclick="view.events.unbind()">Unbind</a>

<script src="build/build.js"></script>

<script>
  var delegates = require('delegates');
  var el = document.querySelector('ul');

  var view = new ListView(el);

  function ListView(el) {
    this.events = delegates(el, this);
    this.events.bind('click li a', 'remove');
    this.events.bind('click li', 'alert');
  }

  ListView.prototype.remove = function(e){
    var el = e.target.parentNode;
    console.log('remove %s', el.textContent);
    el.parentNode.removeChild(el);
  };

  ListView.prototype.alert = function(e){
    var el = e.target;
    alert(el.textContent);
  };
</script>