react-原生事件和合成事件的区别

最新推荐文章于 2024-08-04 13:47:44 发布

小小小骆驼

最新推荐文章于 2024-08-04 13:47:44 发布

阅读量2.4k

点赞数 2

分类专栏：学习笔记文章标签： reactjs javascript

本文链接：https://blog.csdn.net/xiaoluodecai/article/details/107434613

版权

本文探讨了React中的合成事件与原生事件的主要区别，包括合成事件的目的，如封装事件以实现跨平台兼容和统一事件命名。在阻止冒泡的方式上，原生事件可通过返回false，而合成事件在React v0.14以前的版本需特殊处理。对于事件处理函数中的event，合成事件不能在异步函数中访问，但原生事件没有此限制。源码分析部分聚焦于React的SyntheticEvent，讨论了其在事件池中的行为。

摘要由CSDN通过智能技术生成

react-原生事件和合成事件的区别及源码分析

概念

class EventClickDemo extends React.Component {
	constructor(props) {
		super(props)
		this.btnRef = React.createRef()
	}
	componentDidMount() {
		// 这里就是js原生事件
		this.btnRef.current.addEventListener('click', function(e) {
			console.log('native event')
			console.log(e)
		})
	}
	handleClick(event) {
		// 这里就是合成事件，指的是react封装的SyntheticEvent
		console.log('react event')
		console.log(event)
	}
	render() {
		return (
			<div onClick={this.handleClick} ref={this.btnRef}>Click me</div>
		)
	}
}

关于 react 合成事件

目的：

封装事件，实现跨平台，把差异封装在底层
将事件全部统一冒泡到 document 再进行触发
可以统一命名，这样子命名符合 react 编程习惯，比如点击事件 onClick，点击事件（捕获阶段）onClickCapture

api:

boolean bubbles // 是否冒泡
boolean cancelable // 是否可以取消
DOMEventTarget currentTarget
boolean defaultPrevented
number eventPhase
boolean isTrusted
DOMEvent nativeEvent // 相当于原生事件的event
void preventDefault() // 封装的阻止默认行为
boolean isDefaultPrevented()
void stopPropagation() // 阻止冒泡
boolean isPropagationStopped() // 是否设置了阻止冒泡
void persist()
DOMEventTarget targe