react组件事件绑定监听

发表于 | 分类于 | 阅读次数：

定义和用法

addEventListener() 方法用于向指定元素添加事件句柄。

element.addEventListener(event, function, useCapture)

removeEventListener() 方法用于移除由 addEventListener() 方法添加的事件句柄。

element.removeEventListener(event, function, useCapture)

如果要移除事件句柄，addEventListener() 的执行函数必须使用外部函数，如myFun，匿名函数，类似 “document.removeEventListener(“event”, function(){ myScript });” 该事件是无法移除的。

场景：绑定回车事件

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
class Demo extends Components{
    componentDidMount(){
        document.addEventListener('keydown',this.handleEnterKey);
    }
    componentWillUmount(){
        document.removeEventListener('keydown',this.handleEenterKey);
    }
    handleEnterKey = (e) => {
        if(e.keyCode === 13){
          //do somethings
        }
    }
    render(){
        <div>hello,world!</div>
    }
}
0%