react-合成事件

207 阅读1分钟

react的事件绑定不是原生的事件绑定,而是使用react自身的事件合成

作用
  1. 统一处理时间,在用户事件前处理一些事情(模拟事件冒泡+阻止冒泡)
  2. 处理事件兼容性
实现
  1. 在元素身上绑定一个store,记录当前绑定事件type及方法内容
  2. 然后在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版本