课程章节: 第6章 更上一层楼 - 完成 Menu 组件
主讲老师:张轩
课程内容:
今天学习的内容包括:
6-7 功能继续升级 - SubMenu 下拉菜单编码第一部分
6-8 添加交互 - SubMenu下拉菜单编码第二部分
6-9 大功告成 - SubMenu 下拉菜单编码第三部分
课程收获:
一、概念介绍
React合成事件是React 模拟原生DOM事件所有能力 的一个事件对象。
根据 W3C规范 来定义合成事件,兼容所有浏览器,拥有与浏览器原声事件相同的接口。
合成事件除了拥有和浏览器原生事件相同的接口,包括stopPropagetion()和preventDefault();
⚠️ 在React中,所有事件都是合成的,不是原生DOM事件,可以通过 e.nativeEvent 属性获取原生DOM事件。合成事件不会映射到原生事件;例如:在onMouseLeave事件中event.nativeEvent 将指向mouseout 事件;
二、为什么出现这个技术?
浏览器兼容,实现更好的跨平台
顶层事件代理机制:保证冒泡一致性,可以跨浏览器执行。将不同平台事件模拟成合成事件;
避免垃圾回收
React引入事件池,在事件池中获取或释放事件对象;
React事件对象不会被释放掉,而是存入一个数组中;当事件触发,就从这个数组中弹出,避免频繁地创建和销毁(垃圾回收);
方便事件统一管理和事务机制
四、合成事件和原生事件的区别
命名方式不同
原生:onclick(纯小写)
React:onClick(小驼峰)
事件处理函数写法不同
原生事件处理函数为字符串,React JS·X语法中,传入一个函数作为事件处理函数
// 原生事件 事件处理函数写法
<button onclick="handleClick()">Leo 按钮命名</button>
// React 合成事件 事件处理函数写法
const button = <button onClick={handleClick}>Leo 按钮命名</button>
阻止默认行为方式的不同
原生事件:通过返回false 方式阻止默认行为;
React:显式使用preventDefault() 方法阻止;比如阻止标签默认打开新页面为例;
// 原生事件阻止默认行为方式
<a href="https://www.pingan8787.com"
onclick="console.log('Leo 阻止原生事件~'); return false"
>
Leo 阻止原生事件
</a>
// React 事件阻止默认行为方式
const handleClick = e => {
e.preventDefault();
console.log('Leo 阻止原生事件~');
}
const clickElement = <a href="https://www.pingan8787.com" onClick={handleClick}>
Leo 阻止原生事件
</a>
事件处理器返回false时,不阻止事件传递;可以考虑调用e.stopPropagation() 和 e.preventDefault() 。
支持的事件:
如果需要注册捕获阶段的事件处理函数,应该为事件名添加Capture ;例如:处理捕获阶段的点击事件请使用 onClickCapture 而不是 onClick 。
共同学习,写下你的评论
评论加载中...
作者其他优质文章