在不使用绑定的情况下将“this”和参数传递给 addEventListener 函数

Question

继removeEventListener in bootstrapped addon not working when addon disabled之后，我正在探索其他可能性。

除了使用bind()和缓存绑定的函数，有没有办法使用'this'并传递参数？

// works fine but can't pass argeement
contextMenu.addEventListener('popupshowing', 
     this.contextPopupShowing, false);

// passes the argument but 'this' is no longer available
contextMenu.addEventListener('popupshowing', 
    function(){this.contextPopupShowing(window);}, false);

我一直在使用bind() 的许多事件侦听器，我正在寻找不使用bind() 的替代方法

我什至尝试使用来自<menupopup id="contentAreaContextMenu" ...> 的递归函数来获取window

更新：bind()干扰removeEventListener

Answer 1

既然我们谈论的是无重启插件...很多无重启插件使用 unload 和 unloadWindow 辅助函数，以便更轻松地正确实现 shutdown 并帮助处理 @ 之类的东西987654326@，请耐心等待。

助手 - unload

首先，unload 是一个辅助函数，您可以将另一个函数传递给它，它将在shutdown 上运行（或者可以手动调用）。大多数实现都与此极为相似：

var unloaders = []; // Keeps track of unloader functions.

function unload(fn) {
  if (typeof(fn) != "function") {
    throw new Error("unloader is not a function");
  }
  unloaders.push(fn);
  return function() {
    try {
      fn();
    }
    catch (ex) {
      Cu.reportError("unloader threw " + fn.toSource());
      Cu.reportError(ex);
    }
    unloaders = unloaders.filter(function(c) { return c != fn; });
  };
}

然后你会联系shutdown 做正确的事：

function shutdown() {
  ...
  for (let i = unloaders.length - 1; i >= 0; --i) {
    try {
      unloaders[i]();
    }
    catch (ex) {
      Cu.reportError("unloader threw on shutdown " + fn.toSource());
      Cu.reportError(ex);
    }
  }
  unloaders.length = 0;
}

使用unload

现在您可以执行以下操作：

function startup() {
  setupSomething();
  unload(removeSomething);

  setupSomethingElse();
  var manualRemove = unload(removeSomethingElse);
  ...
  if (condition) {
    manualRemove();
  }
}

助手 - unloadWindow

您通常需要创建第二个函数unloadWindow 以在您的插件关闭或窗口关闭时卸载内容，无论首先发生什么。当窗口关闭时不删除东西可能非常棘手，并且很容易创建 Zombie compartments 的 bootstrap.js 和/或代码模块（这是来自编写和审查无重启附加组件的经验）。

function unloadWindow(window, fn) {
  let handler = unload(function() {
    window.removeEventListener('unload', handler, false);
    try {
      fn();
    }
    catch (ex) {
      Cu.reportError("window unloader threw " + fn.toSource());
      Cu.reportError(ex);
    }
  });
  window.addEventListener('unload', handler, false);
};

（有些人可能想“优化”这个，因为只有一个 "unload" 处理程序，但通常你只有这么几个 unloadWindow 调用，这无关紧要。）

把它们放在一起

现在你可以.bind 做任何事情，让卸载闭包跟踪它。此外，您可以使用它来将关闭代码保留在初始化代码旁边，这可能会增加可读性。

function setupWindow(window, document) {
  var bound = this.contextPopupShowing.bind(this);
  contextMenu.addEventListener('popupshowing', bound, false);
  unloadWindow(window, function() {
    contextMenu.removeEventListener('popupshowing', bound, false);
  });

  // Or stuff like
  var element = document.createElement(...);
  contextMenu.appendChild(element);
  unloadWindow(window, function() {
    contextMenu.removeChild(element);
  });

  // Or just combine the above into a single unloader
  unloadWindow(window, function() {
    contextMenu.removeEventListener('popupshowing', bound, false);
    contextMenu.removeChild(element);
  });
}

Answer 2

在支持bind() 之前，您必须在函数外部保存对this 的引用。然后传入一个可以按照你想要的方式转发调用的函数。

var self = this;
contextMenu.addEventListener('popupshowing', function() {
     self.contextPopupShowing.apply(self, arguments);
}, false);

在这种情况下，我们使用apply 将上下文设置为self，我们保存的this 版本，并将任何arguments 通过神奇的arguments 关键字传递给匿名函数包含调用函数时传递的参数列表。

Answer 3

您不必将bind 用于addEventListener。您可以使用handleEvent。我也在那个主题中链接了你：

Removing event listener which was added with bind

MDN :: EventTarget.addEventListener - The value of "this" within the handler

handleEvent实际上是firefox代码库中javascript代码的常用方式。

直接从 MDN 复制：

var Something = function(element) {
  this.name = 'Something Good';
  this.handleEvent = function(event) {
    console.log(this.name); // 'Something Good', as this is the Something object
    switch(event.type) {
      case 'click':
        // some code here...
        break;
      case 'dblclick':
        // some code here...
        break;
    }
  };

  // Note that the listeners in this case are this, not this.handleEvent
  element.addEventListener('click', this, false);
  element.addEventListener('dblclick', this, false);

  // You can properly remove the listners
  element.removeEventListener('click', this, false);
  element.removeEventListener('dblclick', this, false);
}

我最常使用bind 的地方是在执行for 循环时，我使用arr[i] 之类的数组中的某些内容创建匿名函数。如果我不绑定它，那么它总是只取数组的最后一个元素，我不知道为什么，我讨厌它，所以我去使用[].forEach.call(arr, function(arrI)。

Answer 4

http://2ality.com/2013/06/auto-binding.html

var listener = myWidget.handleClick.bind(myWidget);
domElement.addEventListener('click', listener);
...
domElement.removeEventListener(listener);