对象字面量中的 removeEventListener

如何解决对象字面量中的 removeEventListener

我在对象字面量中遇到了 removeEventListener。 我有一个对象，用于在用户浏览网站时添加和删除自定义轮廓。

const OUTLINE = {
  enableOutline: function () {
    if (event.key === 'Tab' || (event.shiftKey && event.key === 'Tab')) {
      document.addEventListener('focusin',() => this.showOutline());
    }
  },showOutline: function () {
    this.showlogoOutline(event);
  },showlogoOutline: function () {
    if (event.target === this.logo) {
      this.logo.classList.add('logo_outline');
    }
  }
};

document.addEventListener('keydown',() => OUTLINE.enableOutline(event));

同一个对象包含删除轮廓的方法，但尝试删除 EventListener 失败。

const OUTLINE = {
  hideOutline: function () {
    this.hidelogoOutline();
    // BELOW DOESN'T WORK
    document.removeEventListener('focusin',this.showOutline);
  },hidelogoOutline: function () {
    if (this.logo.classList.contains('logo_outline')) {
      this.logo.classList.remove('logo_outline');
    }
  }
};

document.addEventListener('mousedown',() => OUTLINE.hideOutline());

解决方法

首先：永远不要让 Tab 键过载（或任何在所有浏览器中具有通用行为的键）。 Tab 被浏览器用来浏览 tabIndexable 元素，像这样的代码“捕获”了 tab 键。不酷。尤其不适合不会使用鼠标的人。 特别如果这是“只为你”或“只为[你认识的不属于该类别的人]”，养成不超载内置行为的习惯 因为这样你就永远不会在确实重要的时候写出糟糕的代码。

话虽如此，您实际上并没有删除您添加的侦听器。函数 () => OUTLINE.hideOutline() 是一个新函数，作用域为声明上下文（与使用 function() { ...} 时获得的执行上下文相反），因此指向与 {{1 完全不同的事物}} 指向。

删除侦听器时没有任何类型的搜索或匹配，它只能删除您之前告诉它添加的exactly the same thing（即它必须具有相同的事件名称，相同的函数句柄和相同的优先级如果您指定了一个标志）。

由于这是一个单例对象原语（例如没有有意义的OUTLINE.hideOutline），所以不要使用this，直接使用它的this名称来引用它自己，所以你可以添加并通过直接引用删除其功能：

const

当然，如果您要进行大量添加和删除事件侦听器的设置，请编写一个简单的事件管理器。例如。从这样的事情开始，并根据需要对其进行自定义。

const OUTLINE = {
  ...
  enableOutline: function(event) {
    const { key } = event;
    if (key.toLowerCase() === `f`) {
      document.addEventListener('focusin',OUTLINE.showOutline);
    }
  }
  hideOutline: function(_event) {
    document.removeEventListener('focusin',OUTLINE.showOutline);
  },};

这会将您的代码变成这样：

class EventManager {
  constructor() {
    this.events = {};
  }

  listen(target,evtName,handler) {
    if (!this.events[evtName]) this.events[evtName] = [];

    const evtList= this.events[evtName];
    const position = this.events[evtName].length;
    const entry = { target,handler,removed:false,remove: () => {
      // removeEventListener always returns undefined
      evtList[position] = target.removeEventListener(evtName,handler);
      entry.removed = true;
    }});

    target.addEventListener(evtName,handler);
    this.events[evtName].push(entry);
    return entry;
  }

  forget(target,handler=false) {
    const evtList = this.events[evtName];
    evtList
      .filter(e => (e.target===target && (handler ? e.handler===handler : true)))
      .forEach(e => e.remove())
  }
}

const Events = new EventManager();

export default Events

,

正如 @Mike 'Pomax' Kamermans 在评论中提到的，每次你说 () => aFunction() 时，你都在创建一个全新的函数。只需传入原始函数，如 aFunction。

您似乎没有正确传递 event 变量，我也在下面的代码块中修复了这个问题。

const OUTLINE = {
  enableOutline: function (event) {
    if (event.key === 'Tab' || (event.shiftKey && event.key === 'Tab')) {
      document.addEventListener('focusin',this.showOutline);
    }
  },showOutline: function (event) {
    this.showLogoOutline(event);
  },showLogoOutline: function (event) {
    if (event.target === this.logo) {
      this.logo.classList.add('logo_outline');
    }
  },hideOutline: function () {
    this.hideLogoOutline();
    document.removeEventListener('focusin',this.showOutline);
  },hideLogoOutline: function () {
    if (this.logo.classList.contains('logo_outline')) {
      this.logo.classList.remove('logo_outline');
    }
  }
};

document.addEventListener('keydown',OUTLINE.enableOutline);

document.addEventListener('mousedown',OUTLINE.hideOutline);