Open monsterooo opened 6 years ago
我们日常开发中基本上在使用javascript进行事件绑定都是这样子的
elem.addEventListener(type, listener[, useCapture]);
我们可以将绑定函数换成一个对象,就像下面这样
elem.addEventListener(type, this[, useCapture]);
其实在事件绑定中的监听函数也可以使用一个对象,事件触发之后会调用对象中的handleEvent函数进行事件的统一处理。
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对象是一个专门同于处理事件的对象,其他的类可以继承此类,进行事件绑定
UiEvent
比如我们这里的Submit对象,它继承了UiEvent在事件绑定的时候使用elem.addEventListener('click', this);
Submit
elem.addEventListener('click', this);
当事件触发后会先调用UiEvent中的handleEvent,它会查找并执行Submit对象中的onclick方法。
我们日常开发中基本上在使用javascript进行事件绑定都是这样子的
我们可以将绑定函数换成一个对象,就像下面这样
其实在事件绑定中的监听函数也可以使用一个对象,事件触发之后会调用对象中的
handleEvent
函数进行事件的统一处理。下面是一个使用事件绑定使用对象的例子
UiEvent
对象是一个专门同于处理事件的对象,其他的类可以继承此类,进行事件绑定比如我们这里的
Submit
对象,它继承了UiEvent
在事件绑定的时候使用elem.addEventListener('click', this);
当事件触发后会先调用
UiEvent
中的handleEvent,它会查找并执行Submit
对象中的onclick方法。