基于对象的事件绑定

我们日常开发中基本上在使用javascript进行事件绑定都是这样子的

elem.addEventListener(type, listener[, useCapture]);

我们可以将绑定函数换成一个对象，就像下面这样

elem.addEventListener(type, this[, useCapture]);

其实在事件绑定中的监听函数也可以使用一个对象，事件触发之后会调用对象中的handleEvent函数进行事件的统一处理。

下面是一个使用事件绑定使用对象的例子

<div class="wrap">
  <button id="js_submit">提交</button>
  <textarea id="js_desc"></textarea>
</div>

var UiEvent = function() {}
UiEvent.prototype = {
  constructor: UiEvent,
  handleEvent: function(event) {
    var eventName = 'on' + event.type;
    if(this[eventName]) {
      this[eventName](event);
    }
  }
};

var Submit = function(){
  var name = 'js_submit';
  var elem = document.getElementById(name);
  this.bindEvent = function() {
    elem.addEventListener('click', this);
  }
  // 定义onclick处理函数
  this.onclick = function(event) {
    console.log(event);
  }
};
Submit.prototype = Object.create(UiEvent.prototype);

var submit = new Submit();
submit.bindEvent();

// Textarea
var Textarea = function(){
  var name = 'js_desc';
  var elem = document.getElementById(name);
  this.bindEvent = function() {
    elem.addEventListener('keyup', this);
  }
  // 定义onkeyup处理函数
  this.onkeyup = function(event) {
    console.log(event.key);
  }
};
Textarea.prototype = Object.create(UiEvent.prototype);

var textarea = new Textarea();
textarea.bindEvent();

UiEvent对象是一个专门同于处理事件的对象，其他的类可以继承此类，进行事件绑定

比如我们这里的Submit对象，它继承了UiEvent在事件绑定的时候使用elem.addEventListener('click', this);

当事件触发后会先调用UiEvent中的handleEvent，它会查找并执行Submit对象中的onclick方法。