在反应生命周期方法中:doc.addEventListener('onmousemove',...不起作用,但是doc.onmousemove = ...是。为什么?

时间:2019-04-21 09:23:45

标签: javascript reactjs lifecycle

我确定我在这里缺少一些简单的东西,但是我很困惑。

为什么addEventListener和removeEventListener函数在这些反应生命周期方法中不起作用,但是在它们下面的注释行起作用呢?

  componentDidMount(){
    document.addEventListener('onmousemove', this.handleMouseMove);
    // document.onmousemove = this.handleMouseMove;
  }

  componentWillUnmount(){
    document.removeEventListener('onmousemove', this.handleMouseMove);
    // document.onmousemove = null;
  }

  handleMouseMove(){ ... }

我可以只使用document.onmousemove = ...代码,它可以工作。但是,为什么以上这些行不起作用?我觉得这里缺少基本的东西。

任何帮助,不胜感激:)

1 个答案:

答案 0 :(得分:2)

事件名称为mousemove,而不是onmousemove

onmousemove是事件处理程序属性

因此,正确的代码是:

document.addEventListener('mousemove', ...);
// OR
document.onmousemove = ...;