最近在事件处理时遇到一个问题,添加事件监听没有问题,一切正常。但是在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 }

 

相关文章:

  • 2022-12-23
  • 2021-08-07
  • 2021-07-08
  • 2021-06-10
  • 2022-12-23
  • 2021-10-16
  • 2022-12-23
  • 2022-12-23
猜你喜欢
  • 2021-07-14
  • 2022-12-23
  • 2021-05-25
  • 2022-12-23
  • 2021-08-25
  • 2022-12-23
  • 2021-09-30
相关资源
相似解决方案