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 () {...}
  }
];

，并且应该处理重复注册。这是一个有效的代码段（不检查键码是否满足条件，但它表明每个事件处理程序仅被调用一次）

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>

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

1 个答案: