JavaScript中的匿名函数的removeEventListener

Question

我有一个包含方法的对象.这些方法被放入匿名函数内的对象中.它看起来像这样:

var t = {};
window.document.addEventListener("keydown", function(e) {
    t.scroll = function(x, y) {
        window.scrollBy(x, y);
    };
    t.scrollTo = function(x, y) {
        window.scrollTo(x, y);
    };
});  

(还有更多代码,但这足以显示问题)

现在我想在某些情况下停止事件监听器.因此我试图做一个removeEventListener,但我无法弄清楚如何做到这一点.我在其他问题中已经读过,无法在匿名函数上调用removeEventListener,但在这种情况下是否也是如此？

我在匿名函数中创建了一个方法,因此我认为这是可能的.看起来像这样:

t.disable = function() {
    window.document.removeEventListener("keydown", this, false);
}

为什么我不能这样做？

还有其他(好的)方法吗？

奖金信息; 这只需要在Safari中工作,因此缺少即支持.

Answer 1

如果你在实际函数中,可以使用arguments.callee作为函数的引用.如:

button.addEventListener('click', function() {
      ///this will execute only once
      alert('only once!');
      this.removeEventListener('click', arguments.callee);
});

编辑: 如果您在严格模式下工作,这将无效("use strict";)

Answer 2

我认为这是匿名函数的重点,它缺少一个名称或引用它的方法.

如果我是你,我只会创建一个命名函数,或者将它放在一个变量中,这样你就可以引用它.

var t = {};
var handler = function(e) {
    t.scroll = function(x, y) {
        window.scrollBy(x, y);
    };
    t.scrollTo = function(x, y) {
        window.scrollTo(x, y);
    };
};
window.document.addEventListener("keydown", handler);

然后你可以删除它

window.document.removeEventListener("keydown", handler);   

Answer 3

的一个版本奥托Nascarella,在严格的模式下工作的解决方案是:

button.addEventListener('click', function handler() {
      ///this will execute only once
      alert('only once!');
      this.removeEventListener('click', handler);
});

Answer 4

有一种新方法可以实现此目的，除 Safari 之外的大多数流行浏览器的最新版本都支持该方法。

检查caniuse以获得更新的支持。

更新：现在 Sefari（版本 15^）也支持。

我们可以添加一个选项来addEventListner调用signal并分配一个signal，AbortController您可以稍后在其上调用该abort()方法。

这是一个例子。

我们创建一个AbortController：

const controller = new AbortController();

然后我们创建eventListner并传入选项signal：

document.addEventListener('scroll',()=>{
    // do something
},{signal: controller.signal})

然后为了eventListner稍后删除，我们调用：

controller.abort()

Answer 5

在现代浏览器中，您可以执行以下操作...

button.addEventListener( 'click', () => {
    alert( 'only once!' );
}, { once: true } );

https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener#Parameters

Answer 6

window.document.removeEventListener("keydown", getEventListeners(window.document.keydown[0].listener));  

可能是几个匿名函数,keydown [1]

Answer 7

这并不理想，因为它删除了所有内容，但可能会满足您的需求：

\n

z = document.querySelector(\'video\');\nz.parentNode.replaceChild(z.cloneNode(1), z);\n

\n

\n

克隆节点会复制其所有属性及其值，包括固有的（在 xe2x80x93line 中）侦听器。它不会复制使用addEventListener() 添加的事件侦听器

\n

\n

Node.cloneNode()

\n