动态创建时多次调用事件处理程序

Question

我正在为我的问题寻找更好的解决方案。
我有一个函数 returns 一个将事件处理程序动态附加到文档的函数，它被包装在 init 函数中：

const init = (events) => {
  const generateListener = listenForKey => ({ keyCode, key}) => {
    if (keyCode === listenForKey) {
      console.log(`action - ${key}`);
    }
  }

  events.forEach(({name, keyCode}) => {
      document.addEventListener(name, generateListener(keyCode))
    });
}

现在，当我运行此代码按预期工作时：

const someEvents = [
  {
    name: 'keypress',
    keyCode: 13
  },
  {
    name: 'keypress',
    keyCode: 43
  }
];
init(someEvents);

当我需要再次运行 init（我确实需要）时，问题就开始了：

init(someEvents);
// ... at a future point in time
init(someEvents);

在这种情况下，处理程序将被调用两次，因为它注册了两次。
这是设计使然，因为浏览器认为它是一个新数据，因为我每次都传递一个新的函数实例。
你可以在这里看到它（只需按 Enter 或 + 键）：

const init = (events) => {
  const generateListener = listenForKey => ({ keyCode, key}) => {
    if (keyCode === listenForKey) {
      console.log(`action - ${key}`);
    }
  }

  events.forEach(({name, keyCode}) => {
      document.addEventListener(name, generateListener(keyCode))
    });
}


const someEvents = [
  {
    name: 'keypress',
    keyCode: 13
  },
  {
    name: 'keypress',
    keyCode: 43
  }
];
init(someEvents);
// this will register the events again and will invoke the handlers twice
//as we are passing "new" argument (a new function instance)
init(someEvents);

<div>Click the '+' or 'Enter' keys </div>

一个可能的解决方案是使用 object parameter 或我自己做一些类似的事情，比如将处理程序存储在 window 中并将它们作为单个实例附加到文档中。这样浏览器将忽略相同处理程序的多个注册：

const init2 = (events) => {
  const generateListener = listenForKey => ({ keyCode, key}) => {
    if (keyCode === listenForKey) {
      console.log(`action - ${key}`);
    }
  }
    
  events.forEach(({name, keyCode}) => {
        const handlerName = `on${name}${keyCode}`;
        this[handlerName] = this[handlerName] || generateListener(keyCode);
      document.addEventListener(name, this[handlerName]);
    });
}

const someEvents = [
  {
    name: 'keypress',
    keyCode: 13
  },
  {
    name: 'keypress',
    keyCode: 43
  }
];
    
init2(someEvents);
init2(someEvents);

这很好用，但是我们污染了全局 window 对象。

我觉得我可能在这里遗漏了一些东西，所以我正在寻找更好的方法。

Answer 1

根据 MDN，具有相同参数和相同目标的多个事件侦听器将被丢弃。

您的问题是因为您是通过匿名函数（箭头函数）进行注册的。

既然您已经有了一个全局对象（即您不需要创建更多的全局对象），您可以使用它来创建命名函数，例如：

const someEvents = [
  {
    name: 'keypress',
    keyCode: 13,
    onkeypress13 () {...}
  },
  {
    name: 'keypress',
    keyCode: 43,
    onkeypress43 () {...}
  }
];

这应该会处理重复注册。这是一个工作片段（没有键码检查条件，但它显示每个事件处理程序只被调用一次）

const init = (events) => {
    events.forEach((event) => {
        document.addEventListener(event.name, event[`on${event.name}${event.keyCode}`])
    });
}

const someEvents = [{
    name: 'keypress',
    keyCode: 13,
    onkeypress13() {
    console.log('13 pressed')
    }
},
{
    name: 'keypress',
    keyCode: 43,
    onkeypress43() {
    console.log('43 pressed')
    }
}
];

init(someEvents);
// this will register the events again and will invoke the handlers twice
//as we are passing "new" argument (a new function instance)
init(someEvents);

<div>Click the '+' or 'Enter' keys </div>

动态创建时多次调用事件处理程序

Event handler invoked multiple times when created dynamically

javascript

event-handling

dom-events

ecmascript-next