删除匿名活动听众

Question

无论如何，是否有添加这样的事件侦听器：

element.addEventListener(event, function(){/* do work here */}, false);

不替换元素？

Answer 1

除非您在Creation中存储了对事件处理程序的引用，否则无法干净地删除事件处理程序。

我通常会将它们添加到该页面上的主要对象中，然后您可以在使用该对象时迭代并清洁处理它们。

Answer 2

您可以这样删除活动听众：

element.addEventListener("click", function clicked() {
    element.removeEventListener("click", clicked, false);
}, false);

Answer 3

旧问题，但这是一个解决方案。

严格来说，除非您存储对函数的引用，否则您不能删除匿名事件侦听器。由于使用匿名函数的目标可能不是创建一个新变量，因此您可以将参考存储在元素本身中：

element.addEventListener('click',element.fn=function fn() {
    //  Event Code
}, false);

稍后，当您要删除它时，您可以执行以下操作：

element.removeEventListener('click',element.fn, false);

请记住，第三个参数（<代码> false ）必须具有与添加事件侦听器相同的 值。

但是，问题本身乞求另一个：为什么？

使用 .addeventListener（）而不是简单的 .onmetthing（）方法：

首先，它允许多>多个事件侦听器是额外。当涉及到选择性地删除它们时，这将成为一个问题：您可能最终会命名它们。如果您想全部删除它们，则 @Tidy-Giant的 OuterHtml 解决方案非常好。

其次，您确实可以选择选择捕获而不是冒泡事件。

如果这两种原因都不重要，您可能会决定使用更简单的 Onsomething 方法。

Answer 4

匿名 bount 事件侦听器

删除所有事件侦听器的最简单方法是将其 exturalhtml 分配给本身。这样做的是通过HTML解析器发送HTML的字符串表示，并将解析的HTML分配给元素。因为没有通过JavaScript传递，所以将无绑定的事件听众。

document.getElementById('demo').addEventListener('click', function(){
    alert('Clickrd');
    this.outerHTML = this.outerHTML;
}, false);

<a id="demo" href="javascript:void(0)">Click Me</a>

---

匿名委派事件听众

一个警告是委派的事件听众，或者在父元素上的事件听众，观察每个事件的每个事件都符合其孩子的一组标准。超越的唯一方法是改变元素以不符合委派事件听众的标准。

document.body.addEventListener('click', function(e){
    if(e.target.id === 'demo') {
        alert('Clickrd');
        e.target.id = 'omed';
    }
}, false);

<a id="demo" href="javascript:void(0)">Click Me</a>

Answer 5

是的，您可以删除一个匿名事件侦听器：

const controller = new AbortController();

document.addEventListener(
  "click",
  () => {
    // do function stuff
  },
  { signal: controller.signal }
);

然后，您以这样的方式删除事件侦听器：

controller.abort();

Answer 6

您可以尝试覆盖 element.AddeventListener 并做任何您想做的事情。
类似：

var orig = element.addEventListener;

element.addEventListener = function (type, listener) {
    if (/dontwant/.test(listener.toSource())) { // listener has something i dont want
        // do nothing
    } else {
        orig.apply(this, Array.prototype.slice.apply(arguments));
    }
};

PS。：不建议这样做，但它会做到这一点（尚未对其进行测试）

Answer 7

用字面函数分配事件处理程序很棘手 - 不仅没有任何方法可以删除它们，而不会克隆节点并用克隆替换它 - 您也可以多次无意中分配同一处理程序，如果您使用使用引用处理程序。即使角色相同，两个函数也总是被视为两个不同的对象。

Answer 8

编辑： as manngo 建议每个评论，您应该使用 .off（）< /strong>而不是 .unbind（） as .unbind（）被弃用为jQuery 3.0，自JQuery 1.7以来就取代了。

即使这是一个古老的问题，也没有提及jQuery，我也会在这里发布答案，因为这是搜索术语'jQuery删除匿名事件处理程序'的第一个结果。

您可以尝试使用。off（）函数来删除它。

$('#button1').click(function() {
       alert('This is a test');
});

$('#btnRemoveListener').click(function() {
       $('#button1').off('click');
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="button1">Click me</button>
<hr/>
<button id="btnRemoveListener">Remove listener</button>

但是，仅当您使用jQuery添加了侦听器时，这才有效-NOT 。addeventListener

找到此。

Answer 9

如果您使用的是jQuery尝试 off 方法

$("element").off("event");

Answer 10

jQuery .off（）方法删除了随附.on（）附加的事件处理程序

Answer 11

使用Ecmascript2015（ES2015，ES6）语言规范，可以使用此 nameandselfbind 函数，它神奇地将匿名回调变成一个指定的回调，甚至可以将其身体绑定到本身，从而使事件听众可以删除删除本身也可以从外部范围中删除（

(function()
{
  // an optional constant to store references to all named and bound functions:
  const arrayOfFormerlyAnonymousFunctions = [],
        removeEventListenerAfterDelay = 3000; // an auxiliary variable for setTimeout

  // this function both names argument function and makes it self-aware,
  // binding it to itself; useful e.g. for event listeners which then will be able
  // self-remove from within an anonymous functions they use as callbacks:
  function nameAndSelfBind(functionToNameAndSelfBind,
                           name = 'namedAndBoundFunction', // optional
                           outerScopeReference)            // optional
  {
    const functionAsObject = {
                                [name]()
                                {
                                  return binder(...arguments);
                                }
                             },
          namedAndBoundFunction = functionAsObject[name];

    // if no arbitrary-naming functionality is required, then the constants above are
    // not needed, and the following function should be just "var namedAndBoundFunction = ":
    var binder = function() 
    { 
      return functionToNameAndSelfBind.bind(namedAndBoundFunction, ...arguments)();
    }

    // this optional functionality allows to assign the function to a outer scope variable
    // if can not be done otherwise; useful for example for the ability to remove event
    // listeners from the outer scope:
    if (typeof outerScopeReference !== 'undefined')
    {
      if (outerScopeReference instanceof Array)
      {
        outerScopeReference.push(namedAndBoundFunction);
      }
      else
      {
        outerScopeReference = namedAndBoundFunction;
      }
    }
    return namedAndBoundFunction;
  }

  // removeEventListener callback can not remove the listener if the callback is an anonymous
  // function, but thanks to the nameAndSelfBind function it is now possible; this listener
  // removes itself right after the first time being triggered:
  document.addEventListener("visibilitychange", nameAndSelfBind(function(e)
  {
    e.target.removeEventListener('visibilitychange', this, false);
    console.log('\nEvent listener 1 triggered:', e, '\nthis: ', this,
                '\n\nremoveEventListener 1 was called; if "this" value was correct, "'
                + e.type + '"" event will not listened to any more');
  }, undefined, arrayOfFormerlyAnonymousFunctions), false);

  // to prove that deanonymized functions -- even when they have the same 'namedAndBoundFunction'
  // name -- belong to different scopes and hence removing one does not mean removing another,
  // a different event listener is added:
  document.addEventListener("visibilitychange", nameAndSelfBind(function(e)
  {
    console.log('\nEvent listener 2 triggered:', e, '\nthis: ', this);
  }, undefined, arrayOfFormerlyAnonymousFunctions), false);

  // to check that arrayOfFormerlyAnonymousFunctions constant does keep a valid reference to
  // formerly anonymous callback function of one of the event listeners, an attempt to remove
  // it is made:
  setTimeout(function(delay)
  {
    document.removeEventListener('visibilitychange',
             arrayOfFormerlyAnonymousFunctions[arrayOfFormerlyAnonymousFunctions.length - 1],
             false);
    console.log('\nAfter ' + delay + 'ms, an event listener 2 was removed;  if reference in '
                + 'arrayOfFormerlyAnonymousFunctions value was correct, the event will not '
                + 'be listened to any more', arrayOfFormerlyAnonymousFunctions);
  }, removeEventListenerAfterDelay, removeEventListenerAfterDelay);
})();

Answer 12

//get Event
let obj = window; //for example
let eventStr= "blur"; //for example
let index= 0; //you can console.log(getEventListeners(obj)[eventStr]) and check index
let e = getEventListeners(obj)[eventStr][index];
//remove this event
obj .removeEventListener(eventStr,e.listener,e.useCapture);

结尾:)
我在Chrome 92中测试，工作

编辑：仅在Chrome中工作，

因为 getEventListeners Chrome中可用的功能。

Answer 13

我如何为我的CustomeVent使用选项参数

options Optional
An object that specifies characteristics about the event listener. The available options are:
...
**once**
A boolean value indicating that the listener should be invoked at most once after being added. If true, the listener would be automatically removed when invoked.

作为我创建的自定义功能，它效果很好。

const addItemOpenEventListener = (item, openItem) => {
  document.addEventListener('order:open', ({detail}) => {
    if(detail.id === item.id) {
      openItem();
    }
  }, {once: true})
};

el.addItemOpenEventListener(item, () => dispatch(itemOpen)()));

检查了我的控制台，似乎有效（任何反馈都赞赏！）

Answer 14

outerText 答案确实做得很好，但是的问题也将从所有子节点中删除听众。为了解决这个问题，您应该先存储对节点的引用，清除元素，然后在替换 offerText 属性后将其添加回。

以下将从身体元素中删除所有事件听众。

var nodes = [];
document.body.childNodes.forEach((node) => nodes.push(node));
document.body.innerHTML = "";
document.body.outerHTML = document.body.outerHTML;
nodes.forEach((node) => document.body.appendChild(node));

Answer 15

以下对我来说足够好。该代码处理另一个事件触发侦听器从元素中删除的情况。事先无需函数声明。

myElem.addEventListener("click", myFunc = function() { /*do stuff*/ });

/*things happen*/

myElem.removeEventListener("click", myFunc);