react的事件绑定不是原生的事件绑定,而是使用react自身的事件合成
作用
- 统一处理时间,在用户事件前处理一些事情(模拟事件冒泡+阻止冒泡)
- 处理事件兼容性
实现
- 在元素身上绑定一个store,记录当前绑定事件type及方法内容
- 然后在document上绑定对应事件,触发事件的元素使用event.target获取
event
onClick={(event)=> { console.log(event)}}
- event是合成事件对象,并不是原生事件对象
- 冒泡的实现:event.parent while方法向上执行
- 阻止冒泡:react封装的是stoppropagation,所以需要调用这个方法,不能用cancelbubble
- 阻止默认事件:react封装的是preventdefault,所以需要调用这个方法,不能用returnValue=false
react15与react17有所不同
- 15:都是代理到document
- 17:都代理给了容器div#root,因为react希望一个页面可以运行多个react版本