Question

假设我想在按钮上注册一次性事件监听器，我可以写：

var someButton;
var once = function() {
  console.log("clicked");
  someButton.removeEventListener("click", once);
};
someButton.addEventListener("click", once);

如果我甚至不想给这个功能起一个名字怎么办？像：

var someButton;
someButton.addEventListener("click", function() {
  console.log("clicked");
  someButton.removeEventListener("click", /* what goes here? */);
});

Answer 1

你需要给它一个名字。您可以使用命名函数表达式。

someButton.addEventListener("click", function foo () {
  console.log("clicked");
  someButton.removeEventListener("click", foo);
});

它将作用域，因此只能从函数中访问。

或者，在addEventListener中使用新的（非常新的，需要Chrome 55或Firefox 50，不需要MSIE，Opera或稳定的Safari支持）addEventListener选项语法：

someButton.addEventListener("click", function () {
  console.log("clicked");
}, { once: true });

Answer 2

如果我甚至不想给这个功能起一个名字怎么办？像：

无论如何，只要给它一个名字！

var someButton;
someButton.addEventListener("click", function once() {
  console.log("clicked");
  someButton.removeEventListener("click", once);
});

这有额外的好处，你的堆栈跟踪现在将显示函数名称。

Answer 3

您可以为函数指定一个名称，该名称除了在其中以外的任何位置：

var someButton;
someButton.addEventListener("click", function handler() {
  console.log("clicked");
  someButton.removeEventListener("click", handler);
});

不在handler范围内创建someButton标识符绑定。（历史记录：IE8和之前的版本有一个错误。）

如果您真的不想这样做，并且不介意使用松散模式并使用已弃用的内容，则可以改为使用arguments.callee：

// NOT RECOMMENDED AT ALL. WILL NOT WORK IN STRICT MODE.
var someButton;
someButton.addEventListener("click", function() {
  console.log("clicked");
  someButton.removeEventListener("click", arguments.callee);
});

如何从内部访问函数对象？

3 个答案: