Question

免责声明：标题不是非常精确。

我使用公共方法提供服务＆＃39; openCamera＆＃39;调用全局对象中的库并将eventlisteners附加到其HTML元素。当我从HTML元素事件中调用此服务方法时，它工作正常，但是当我通过附加到窗口元素的事件调用它时。以下示例：

class ImageService {
  public static AttachEventOnce = false;
  public openCamera() {
    let camera = new JpegCamera('myContainer');
    // captureBtn and videoBox are HTML elements generated from the library once instantiated
    camera.captureBtn.addEventListener('click', () => this.openCamera()); // this works fine
    camera.videoBox.addEventListener('resize', () => this.openCamera()); // doesn't enter here ie not calling it
    if (!ImageService.AttachEventOnce) {
      var that = this;
      window.addEventListener('resize', () => that.openCamera()); // the buttons stop working
      ImageService.AttachEventOnce = true;
    }
  };
}

逻辑有些缩小，但或多或少相同。我只想在调整窗口大小时再次调用服务方法。我不在乎我附加监听器的位置（从库或窗口生成的HTML元素）。

我的看法：窗口似乎也保留了较旧的对象引用，以及其他我认为导致问题的按钮的监听器。

Answer 1

窗口似乎也保留了旧的对象引用以及其他我认为导致问题的其他按钮的监听器。

正确 - 不是因为它在window上，而是因为你正在使用箭头功能而只挂了一次事件，在第一个实例上调用了openCamera 。因此，该实例是否被其他所有内容丢弃并不重要，它是唯一实例将接收resize事件。（也没有理由var that = this;然后在函数中使用that;箭头函数关闭this就像它们做变量一样，所以它完全正好使用{{1}在函数内部会这样做。）

目前尚不清楚为什么要这样做而不是以特定于实例的方式挂钩事件，就像你是其他事件一样。如果你只删除逻辑连接一次，你就会得到每个实例的行为。

另外：每次事件发生时附加 new 事件处理程序都很奇怪。你很快就会把它们堆叠起来。第一次（比方说）您收到this，您将添加第二个click处理程序;下次收到click时，您将收到其中两个（每个处理程序一个），并添加两个更多处理程序;等等，每次都加倍。这对于点击来说已经足够糟糕了，但click引起了灾难，因为在调整窗口大小时会触发{em>批次 resize个事件。

使用EventListeners调用服务

1 个答案: