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

Question

我正在寻找更好的解决方案来解决我的问题。
我有一个函数返回一个将事件处理程序动态附加到文档的函数，它被包装在 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或者做一些与我自己类似的事情，例如将处理程序存储在窗口中并将它们作为单个实例附加到文档。这样浏览器将忽略同一处理程序的多次注册:

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);

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

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

Answer 1

根据MDN ，具有相同参数且位于同一目标的多个事件监听器将被丢弃。

您的问题是由于您通过匿名函数(箭头函数)进行注册所致。

现在，由于您已经有了一个全局对象(即您不需要创建更多全局对象)，因此您可以使用它来创建命名函数，例如:

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

这应该处理重复注册。这是一个工作片段(没有关键代码检查 if 条件，但它显示每个事件处理程序仅被调用一次)

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>