javascript - Safari 上 Node 实例上的 TypeError : Can only call Node. addEventListener

Question

我的 React 组件中有这段代码，它禁用了“enter”键。

export const attachDisableEnterEvent = (ref) => {
  const node = ReactDOM.findDOMNode(ref);
  // Evergreen event listener || IE8 event listener
  const addEvent = node.addEventListener || node.attachEvent;
  addEvent('keypress', _disableEnter, false);
}

它在 Chrome/Firefox 上运行良好，但在 Safari 上不行。在 Safari 上我得到:-

TypeError: Can only call Node.addEventListener on instances of Node

<小时/>

我只能通过这样做让它工作(在所有方面):-

addEvent.call(node, 'keypress', _disableEnter, false);

只是想知道为什么 addEventListener 的实现在 Chrome 和 Safari 上不同。看起来 Chrome 上的 Node.addEventListener 会直观地将 this 绑定(bind)到定义它的节点实例。

Answer 1

这可能与我们有以下情况的原因相同:

var log = console.log;
log('foo') // TypeError

相反，我们必须:

var log = console.log.bind(console); // bind console.log function to it's proper context
log('foo') // 'foo'

就您而言，请调用

addEvent('keypress', _disableEnter, false);

使上下文成为窗口对象(隐式)。

一般来说，当您打算将函数传递给其他人时，您总是希望首先将函数绑定(bind)到所属对象。每个浏览器的浏览器实现都不同，因此这是确保其统一工作的最佳方法。

在控制台情况下，我相信 .log 指的是控制台对象本身的其他实例方法。因此，在 Safari 中，node.addEventListener 函数的实现方式可能只需要在 node 上定义其他函数，并且它们可能会抛出更具描述性的错误消息，如下所示好吧。

所以你应该这样做:

const addEvent = node.addEventListener || node.attachEvent;
const boundAddEvent = addEvent.bind(node);
// use boundAddEvent however you like anywhere, or .call like you did