React原生事件才是亲儿子,合成事件哭晕在厕所

原生事件:绑定在真实的DOM上,一般在componentDidMount阶段进行绑定,在componentWillUnmount阶段进行解绑,以免内存泄漏。

const closeDom = this.closeAlert;
closeDom.addEventListener('click', this.closeMarker, false);

合成事件:React将事件绑在虚拟DOM上(合成的只配在虚拟dom上,难受),在document处监听所有支持的事件,当事件发生并冒泡至document处时,React将事件内容封装并交由真正的处理函数运行。

<div onClick={this.onClick}>Demo</div>

事件执行的优先级:原生事件>合成事件(亲儿子的基本优待政策),原因是合成事件是在事件的冒泡阶段执行,此时原生事件已经执行,而合成事件需要冒泡到document处才能执行。

componentDidMount() {
this.demoDiv.addEventListener('click', this.onDOMClick, false)
	}

onDOMClick = (evt) => {
console.log('dom event')
    }

onClick= (evt) => {
console.log('react event')
    }

render() {
	return (
		<div ref={(self) => this.demoDiv= self} onClick={this.onClick}>Demo</div>
	)
}

//输出结果为:dom event react event

同一dom节点,如果原生事件使用evt.stopPropagation()阻止冒泡,由于无法冒泡到document,合成事件将失效。(你看看,这还是人吗,亲儿子阻止冒泡,搞得合成事件直接完蛋)
父子节点之间,原生事件和合成事件混用的情况下,两个节点的原生事件都会优先执行。(基本权利,同上,心累)

componentDidMount() {
this.parentDom.addEventListener('click', this.onParentDOMClick, false)
this.childDom.addEventListener('click', this.onChildDOMClick, false)
    }

onParentDOMClick = (evt) => {
console.log('parent dom event')
    }

onChildDOMClick = (evt) => {
console.log('child dom event')
    }

onParentClick = (evt) => {
console.log('parent react event')
    }

onChildClick = (evt) => {
console.log('child react event')
    }

render() {
return (
<div ref={(self)=>this.parentDom= self} onClick={this.onParentClick}>
<div ref={(self)=>this.childDom= self} className="child" onClick={this.onChildClick}>
                    Demo
</div>
</div>
        )
    }
    
//输出结果为:child dom event parent dom event child react eventparent react event

总结:合成事件的监听器是由React统一注册在document上面的,仅有冒泡阶段,所以原生事件的响应总是早于合成事件。同一Dom树节点,阻止原生事件冒泡后,会阻止合成事件的监听器执行。所以,在开发中,应正确使用或尽量避免混用事件。(有亲的就不要后的,亲儿子没办法的话,小心被阻止冒泡半路截胡)
以上内容参考了沈老师的知识点总结,如果有涉及侵权的话,请联系我删除。

  • 0
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值