React实现监听粘贴事件并获取粘贴板中的截图

目录

• 监听粘贴事件并获取粘贴板中的截图
  • TSX中给组件添加监听粘贴事件
  • 从粘贴板获取截图文件
• React监听事件
  • 事件监听
  • 绑定的事件函数相关
  • 扩展

监听粘贴事件并获取粘贴板中的截图

TSX中给组件添加监听粘贴事件

?

1 2 3 4 5 6 7 8 9 10 11

const pasteImageRef = useRef<HTMLDivElement>(null); useEffect(()=>{ ?? ?//给组件添加监听粘贴事件 ?? ?pasteImageRef.current?.addEventListener('paste', pasteHandler);?? ? },[]); <div ? tabIndex={-1} // 设置tabIndex才可以聚焦 ? ref={pasteImageRef} > ? <span>Ctrl+V 粘贴截图</span> </div>

从粘贴板获取截图文件

?

1 2 3 4 5 6 7 8 9 10 11 12

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监听事件

事件监听

添加事件监听

?

1	window.addEventListener('scroll', this.handleListen)

移除事件监听

?

1	window.removeEventListener('scroll', this.handleListen)

绑定的事件函数相关

绑定是事件函数必须是同一个，如果不会同一个，会导致解绑失败。

一般会用到的事件函数类型有三种：命名函数、箭头函数、匿名函数

这里重点是添加处理的函数，addEventListener()和removeEventListener()添加的处理函数必须是同一个函数，什么叫同一个函数呢，就是说这两个函数时相等的，指向同一个地址。

1. 匿名函数

匿名函数在事件绑定中的添加与移除

?

1 2 3 4 5 6

window.addEventListener('scroll', function(e){ ? ? console.log(e) }); window.removeEventListener('scroll', function(e){ ? ? console.log(e) });

从上面的实例写法来说，很明显添加和移除事件时因为使用的是匿名函数，所以会返回两个不同的地址，这两个事件不同，所以无法移除事件

2. 命名函数

命名函数在事件绑定中的添加与移除

?

1 2 3 4 5 6 7

handleScroll(){ // 一些代码 } window.addEventListener('scroll',? ?? ?this.handleScroll.bind(this)); window.removeEventListener('scroll',? ?? ?this.handleScroll.bind(this));

以上是常用的使用命名函数的写法，但其实这样写还是不对的，每次加上bind之后返回的函数并不是指向同一个函数

?

1 2 3 4 5 6 7 8 9 10 11 12

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中提前声明好

?

1 2 3 4 5 6 7 8 9

constructor(){ ? ? super(); ? ? this.handleScroll = this.handleScroll.bind(this) } handleScroll(){ // 一些代码 } window.addEventListener('scroll', this.handleScroll); window.removeEventListener('scroll', this.handleScroll);

3. 箭头函数

可以直接使用箭头函数来避免返回的不是同一个函数这种情况

箭头函数在事件绑定中的添加与移除

?

1 2 3 4 5

handleScroll = () => { // 一些代码 } window.addEventListener('scroll', this.handleScroll); window.removeEventListener('scroll', this.handleScroll);

扩展

?

1 2	target.addEventListener(type, listener, options); target.addEventListener(type, listener, useCapture);

• target

可以有两种，window和自定义对象

?

1 2 3

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 仍然调用了这个函数，客户端将会忽略它并抛出一个控制台警告。

?

1 2 3 4 5

addEventListener(type, listener, { ? ? capture: false, ? ? once: false, ? ? passive: false })

• useCapture(可选)

Boolean，在DOM树中，注册了listener的元素， 是否要先于它下面的EventTarget，调用该listener。

当useCapture(设为true) 时，沿着DOM树向上冒泡的事件，不会触发listener。当一个元素嵌套了另一个元素，并且两个元素都对同一事件注册了一个处理函数时，所发生的事件冒泡和事件捕获是两种不同的事件传播方式。

?

1	addEventListener(type, listener, false)