亲宝软件园·资讯

展开

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

Divine0 人气:0

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

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);

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

1.window.addEventListener('scroll', this.handleScroll);
2.const obj = document.getElementsByClassName(classname)[0];
obj.addEventListener('scroll', this.handleScroll);

表示监听事件类型的字符串

一般常用的是鼠标事件(‘click’, ‘dblclick’)和键盘事件(‘keydown’, ‘keypress’)等

当所监听的事件类型触发时,会接收到一个事件通知(实现了 Event 接口的对象)对象。listener 必须是一个实现了 EventListener 接口的对象,或者是一个函数。

一个指定有关 listener 属性的可选参数对象。可用的选项如下:

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

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

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

addEventListener(type, listener, false)

以上为个人经验,希望能给大家一个参考,也希望大家多多支持。 

加载全部内容

相关教程
猜你喜欢
用户评论