基于对象的事件绑定

时间:2021-1-8 作者:admin

我们日常开发中基本上在使用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方法。

声明:本文内容由互联网用户自发贡献自行上传,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任。如果您发现有涉嫌版权的内容,欢迎进行举报,并提供相关证据,工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。