React实现监听粘贴事件并获取粘贴板中的截图
监听粘贴事件并获取粘贴板中的截图
TSX中给组件添加监听粘贴事件
const pasteImageRef = useRef<HTMLDivElement>(null); useEffect(()=>{ //给组件添加监听粘贴事件 pasteImageRef.current?.addEventListener('paste', pasteHandler); },[]); <div tabIndex={-1} // 设置tabIndex才可以聚焦 ref={pasteImageRef} > <span>Ctrl+V 粘贴截图</span> </div>
从粘贴板获取截图文件
const pasteHandler = (e: ClipboardEvent) => { const { clipboardData } = e; const { items } = clipboardData; const { length } = items; let blob = null; for (let i = 0; i < length; i++) { const item = items[i]; if (item.type.startsWith('image')) { blob = item.getAsFile(); // blob中就是截图的文件,获取后可以上传到服务器 } } };
React监听事件
事件监听
添加事件监听
window.addEventListener('scroll', this.handleListen)
移除事件监听
window.removeEventListener('scroll', this.handleListen)
绑定的事件函数相关
绑定是事件函数必须是同一个,如果不会同一个,会导致解绑失败。
一般会用到的事件函数类型有三种:命名函数、箭头函数、匿名函数
这里重点是添加处理的函数,addEventListener()和removeEventListener()添加的处理函数必须是同一个函数,什么叫同一个函数呢,就是说这两个函数时相等的,指向同一个地址。
1. 匿名函数
匿名函数在事件绑定中的添加与移除
window.addEventListener('scroll', function(e){ console.log(e) }); window.removeEventListener('scroll', function(e){ console.log(e) });
从上面的实例写法来说,很明显添加和移除事件时因为使用的是匿名函数,所以会返回两个不同的地址,这两个事件不同,所以无法移除事件
2. 命名函数
命名函数在事件绑定中的添加与移除
handleScroll(){ // 一些代码 } window.addEventListener('scroll', this.handleScroll.bind(this)); window.removeEventListener('scroll', this.handleScroll.bind(this));
以上是常用的使用命名函数的写法,但其实这样写还是不对的,每次加上bind之后返回的函数并不是指向同一个函数
const test = { name:'test', getName:function(){ console.log(this.name) } } let func1 = test.getName.bind(test); let func2 = test.getName.bind(test); let func3 = test.getName; let func4 = test.getName; console.log(func1==func2) console.log(func3==func4)
如果还想要用命名函数,那么就要换种写法,解决方法是先在constructor中提前声明好
constructor(){ super(); this.handleScroll = this.handleScroll.bind(this) } handleScroll(){ // 一些代码 } window.addEventListener('scroll', this.handleScroll); window.removeEventListener('scroll', this.handleScroll);
3. 箭头函数
可以直接使用箭头函数来避免返回的不是同一个函数这种情况
箭头函数在事件绑定中的添加与移除
handleScroll = () => { // 一些代码 } window.addEventListener('scroll', this.handleScroll); window.removeEventListener('scroll', this.handleScroll);
扩展
target.addEventListener(type, listener, options); target.addEventListener(type, listener, useCapture);
target
可以有两种,window和自定义对象
1.window.addEventListener('scroll', this.handleScroll); 2.const obj = document.getElementsByClassName(classname)[0]; obj.addEventListener('scroll', this.handleScroll);
type
表示监听事件类型的字符串
一般常用的是鼠标事件(‘click’, ‘dblclick’)和键盘事件(‘keydown’, ‘keypress’)等
listener
当所监听的事件类型触发时,会接收到一个事件通知(实现了 Event 接口的对象)对象。listener 必须是一个实现了 EventListener 接口的对象,或者是一个函数。
options
(可选)
一个指定有关 listener 属性的可选参数对象。可用的选项如下:
capture
: Boolean,表示 listener 会在该类型的事件捕获阶段传播到该 EventTarget 时触发。once
: Boolean,表示 listener 在添加之后最多只调用一次。如果是 true, listener 会在其被调用之后自动移除。passive
: Boolean,设置为true时,表示 listener 永远不会调用preventDefault()。如果 listener 仍然调用了这个函数,客户端将会忽略它并抛出一个控制台警告。
addEventListener(type, listener, { capture: false, once: false, passive: false })
useCapture
(可选)
Boolean,在DOM树中,注册了listener的元素, 是否要先于它下面的EventTarget,调用该listener。
当useCapture(设为true) 时,沿着DOM树向上冒泡的事件,不会触发listener。当一个元素嵌套了另一个元素,并且两个元素都对同一事件注册了一个处理函数时,所发生的事件冒泡和事件捕获是两种不同的事件传播方式。
addEventListener(type, listener, false)
以上为个人经验,希望能给大家一个参考,也希望大家多多支持猪先飞。
原文出处:https://blog.csdn.net/Divine0/article/details/124471381
相关文章
- 这篇文章主要介绍了vue 监听 Treeselect 选择项的改变操作,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧...2020-09-01
Laravel 5.1中定义事件、事件监听器以及触发事件例子
下文我们来看一篇关于Laravel 5.1中定义事件、事件监听器以及触发事件例子,希望能够帮助到各位新手朋友的哦。 这里我们基于之前基于模型+缓存对文章增删改查这篇...2016-11-25关于React Native报Cannot initialize a parameter of type'NSArray<id<RCTBridgeModule>>错误(解决方案)
这篇文章主要介绍了关于React Native报Cannot initialize a parameter of type'NSArray<id<RCTBridgeModule>>错误,本文给大家分享解决方案,需要的朋友可以参考下...2021-05-12- 这篇文章主要为大家分享了Bootstrap教程JS插件滚动监听学习笔记,内容很详细,感兴趣的小伙伴们可以参考一下...2016-05-20
React引入antd-mobile+postcss搭建移动端
本文给大家分享React引入antd-mobile+postcss搭建移动端的详细流程,文末给大家分享我的一些经验记录使用antd-mobile时发现我之前配置的postcss失效了,防止大家踩坑,特此把解决方案分享到脚本之家平台,需要的朋友参考下吧...2021-06-21- 这篇文章主要介绍了React使用高德地图的实现示例(react-amap),文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧...2021-04-18
详解nginx同一端口监听多个域名和同时监听http与https
这篇文章主要介绍了详解nginx同一端口监听多个域名和同时监听http与https的相关资料,需要的朋友可以参考下...2017-07-06使用 React 和 Threejs 创建一个VR全景项目的过程详解
这篇文章主要介绍了使用 React 和 Threejs 创建一个VR全景项目的过程详解,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下...2021-04-06- 思路其实没有那么复杂,把地图想成一个盒子容器,地图中心点想成盒子中心点;扎点在【地图中心点】不会动,当移动地图时,去获取【地图中心点】经纬度,设置某个位置的时候,将经纬度设置为【地图中心点】即可...2021-06-20
- 这篇文章主要介绍了C#自定义事件监听实现方法,涉及C#事件监听的实现技巧,具有一定参考借鉴价值,需要的朋友可以参考下...2020-06-25
- 这篇文章主要为大家详细介绍了React列表栏及购物车组件使用,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下...2021-06-28
- 这篇文章主要介绍了react使用antd表单赋值,用于修改弹框的操作,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧...2020-10-29
jQuery绑定事件监听bind和移除事件监听unbind用法实例详解
这篇文章主要介绍了jQuery绑定事件监听bind和移除事件监听unbind用法,结合实例形式详细分析了绑定事件监听bind和移除事件监听unbind的具体使用技巧与相关注意事项,需要的朋友可以参考下...2016-01-21- 这篇文章主要介绍了JavaScript为事件句柄绑定监听函数的方法,结合实例详细分析了常见的事件句柄绑定监听函数的实现技巧,并实例讲解了跨浏览器的实现方法,需要的朋友可以参考下...2015-12-17
- 这篇文章主要介绍了React Native 启动流程简析,文以 react-native-cli 创建的示例工程(安卓部分)为例,给大家分析 React Native 的启动流程,需要的朋友可以参考下...2021-08-18
- 这篇文章主要介绍了一百多行代码实现react拖拽hooks,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧...2021-03-21
- useState 通过在函数组件里调用它来给组件添加一些内部 state,React 会在重复渲染时保留这个 state,接下来通过一个示例来看看怎么使用 useState吧...2021-06-04
- 高阶组件就是接受一个组件作为参数并返回一个新组件(功能增强的组件)的函数。这里需要注意高阶组件是一个函数,并不是组件,这一点一定要注意,本文给大家分享React 高阶组件HOC使用小结,一起看看吧...2021-06-13
- 这篇文章主要介绍了React中使用setInterval函数的实例,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下...2021-04-06
- 本文主要介绍了react为什么不推荐使用index作为key,文中通过示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下...2021-07-22