最近在事件处理时遇到一个问题,添加事件监听没有问题,一切正常。但是在remove的时候,却怎么也删除不了。调试代码后发现是匿名函数的原因。例如有如下代码:
1 import { EventEmitter, } from 'events'; 2 3 class EventBase extends EventEmitter { 4 constructor() { 5 super(); 6 } 7 } 8 9 let EventInstance = new EventBase(); 10 11 class Operator { 12 constructor() {} 13 14 onTouchStart(e) {...} 15 16 bindEvent() { 17 // 注意bind(this)之后就不是OnTouchStart了,而是一个匿名的函数 18 EventInstance.on(this.onTouchStart.bind(this)); 19 } 20 21 unBindEvent() { 22 // 这时无法成功 23 EventInstance.removeListener(this.onTouchStart); 24 25 /** 26 * 即使这样也无法成功 27 * EventInstance.removeListener(this.onTouchStart.bind(this)); 28 */ 29 } 30 }
正确的做法如下:
1 import { EventEmitter, } from 'events'; 2 3 class EventBase extends EventEmitter { 4 constructor() { 5 super(); 6 } 7 } 8 9 let EventInstance = new EventBase(); 10 11 class Operator { 12 constructor() { 13 // 提前绑定 14 this.onTouchStart = this.onTouchStart.bind(this); 15 } 16 17 onTouchStart(e) {...} 18 19 bindEvent() { 20 // 这样就可以了 21 EventInstance.on(this.onTouchStart); 22 } 23 24 unBindEvent() { 25 // 顺利解除 26 EventInstance.removeListener(this.onTouchStart); 27 } 28 }