React實(shí)現(xiàn)監(jiān)聽(tīng)粘貼事件并獲取粘貼板中的截圖

更新時(shí)間：2022年08月08日 17:08:25 作者：Divine0

這篇文章主要介紹了React實(shí)現(xiàn)監(jiān)聽(tīng)粘貼事件并獲取粘貼板中的截圖方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教

監(jiān)聽(tīng)粘貼事件并獲取粘貼板中的截圖

TSX中給組件添加監(jiān)聽(tīng)粘貼事件

const pasteImageRef = useRef<HTMLDivElement>(null);
useEffect(()=>{
?? ?//給組件添加監(jiān)聽(tīng)粘貼事件
?? ?pasteImageRef.current?.addEventListener('paste', pasteHandler);?? ?
},[]);
<div
? tabIndex={-1} // 設(shè)置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中就是截圖的文件，獲取后可以上傳到服務(wù)器
? ? }
? }
};

React監(jiān)聽(tīng)事件

事件監(jiān)聽(tīng)

添加事件監(jiān)聽(tīng)

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

移除事件監(jiān)聽(tīng)

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

綁定的事件函數(shù)相關(guān)

綁定是事件函數(shù)必須是同一個(gè)，如果不會(huì)同一個(gè)，會(huì)導(dǎo)致解綁失敗。

一般會(huì)用到的事件函數(shù)類型有三種：命名函數(shù)、箭頭函數(shù)、匿名函數(shù)

這里重點(diǎn)是添加處理的函數(shù)，addEventListener()和removeEventListener()添加的處理函數(shù)必須是同一個(gè)函數(shù)，什么叫同一個(gè)函數(shù)呢，就是說(shuō)這兩個(gè)函數(shù)時(shí)相等的，指向同一個(gè)地址。

1. 匿名函數(shù)

匿名函數(shù)在事件綁定中的添加與移除

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

從上面的實(shí)例寫(xiě)法來(lái)說(shuō)，很明顯添加和移除事件時(shí)因?yàn)槭褂玫氖悄涿瘮?shù)，所以會(huì)返回兩個(gè)不同的地址，這兩個(gè)事件不同，所以無(wú)法移除事件

2. 命名函數(shù)

命名函數(shù)在事件綁定中的添加與移除

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

以上是常用的使用命名函數(shù)的寫(xiě)法，但其實(shí)這樣寫(xiě)還是不對(duì)的，每次加上bind之后返回的函數(shù)并不是指向同一個(gè)函數(shù)

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)

如果還想要用命名函數(shù)，那么就要換種寫(xiě)法，解決方法是先在constructor中提前聲明好

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

3. 箭頭函數(shù)

可以直接使用箭頭函數(shù)來(lái)避免返回的不是同一個(gè)函數(shù)這種情況

箭頭函數(shù)在事件綁定中的添加與移除

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

擴(kuò)展

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

target

可以有兩種，window和自定義對(duì)象

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

type

表示監(jiān)聽(tīng)事件類型的字符串

一般常用的是鼠標(biāo)事件(‘click’, ‘dblclick’)和鍵盤(pán)事件(‘keydown’, ‘keypress’)等

listener

當(dāng)所監(jiān)聽(tīng)的事件類型觸發(fā)時(shí)，會(huì)接收到一個(gè)事件通知（實(shí)現(xiàn)了 Event 接口的對(duì)象）對(duì)象。listener 必須是一個(gè)實(shí)現(xiàn)了 EventListener 接口的對(duì)象，或者是一個(gè)函數(shù)。

options(可選)

一個(gè)指定有關(guān) listener 屬性的可選參數(shù)對(duì)象?？捎玫倪x項(xiàng)如下：

capture: Boolean，表示 listener 會(huì)在該類型的事件捕獲階段傳播到該 EventTarget 時(shí)觸發(fā)。
once: Boolean，表示 listener 在添加之后最多只調(diào)用一次。如果是 true， listener 會(huì)在其被調(diào)用之后自動(dòng)移除。
passive: Boolean，設(shè)置為true時(shí)，表示 listener 永遠(yuǎn)不會(huì)調(diào)用preventDefault()。如果 listener 仍然調(diào)用了這個(gè)函數(shù)，客戶端將會(huì)忽略它并拋出一個(gè)控制臺(tái)警告。

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

useCapture(可選)

Boolean，在DOM樹(shù)中，注冊(cè)了listener的元素，是否要先于它下面的EventTarget，調(diào)用該listener。

當(dāng)useCapture(設(shè)為true) 時(shí)，沿著DOM樹(shù)向上冒泡的事件，不會(huì)觸發(fā)listener。當(dāng)一個(gè)元素嵌套了另一個(gè)元素，并且兩個(gè)元素都對(duì)同一事件注冊(cè)了一個(gè)處理函數(shù)時(shí)，所發(fā)生的事件冒泡和事件捕獲是兩種不同的事件傳播方式。