站长资讯网
最全最丰富的资讯网站

react的合成事件如何形容

React合成事件是React模拟原生DOM事件所有能力的一个事件对象,即浏览器原生事件的跨浏览器包装器;它根据W3C规范来定义合成事件,兼容所有浏览器,拥有与浏览器原生事件相同的接口。在React中,所有事件都是合成的,不是原生DOM事件,但可以通过“e.nativeEvent”属性获取DOM事件。

react的合成事件如何形容

前端(vue)入门到精通课程,老师在线辅导:联系老师
Apipost = Postman + Swagger + Mock + Jmeter 超好用的API调试工具:点击使用

本教程操作环境:Windows7系统、react18版、Dell G3电脑。

一、合成事件是什么

React基于浏览器的事件机制自身实现了一套事件机制,包括事件注册、事件的合成、事件冒泡、事件派发等

在React中这套事件机制被称之为合成事件

合成事件(SyntheticEvent)

React 合成事件(SyntheticEvent)是 React 模拟原生 DOM 事件所有能力的一个事件对象,即浏览器原生事件的跨浏览器包装器。它根据 W3C 规范 来定义合成事件,兼容所有浏览器,拥有与浏览器原生事件相同的接口。例如

const button = <button onClick={handleClick}>按钮</button>
登录后复制

在 React 中,所有事件都是合成的,不是原生 DOM 事件,但可以通过 e.nativeEvent 属性获取 DOM 事件。 比如:

const handleClick = (e) => console.log(e.nativeEvent);; const button = <button onClick={handleClick}>按钮</button>
登录后复制

从上面可以看到React事件和原生事件也非常的相似,但也有一定的区别:

  • 事件名称命名方式不同

// 原生事件绑定方式 <button onclick="handleClick()">按钮命名</button>        // React 合成事件绑定方式 const button = <button onClick={handleClick}>按钮命名</button>
登录后复制

  • 事件处理函数书写不同

// 原生事件 事件处理函数写法 <button onclick="handleClick()">按钮命名</button>        // React 合成事件 事件处理函数写法 const button = <button onClick={handleClick}>按钮命名</button>
登录后复制

虽然onclick看似绑定到DOM元素上,但实际并不会把事件代理函数直接绑定到真实的节点上,而是把所有的事件绑定到结构的最外层,使用一个统一的事件去监听。【

赞(0)
分享到: 更多 (0)
网站地图   沪ICP备18035694号-2    沪公网安备31011702889846号