日本免费高清视频-国产福利视频导航-黄色在线播放国产-天天操天天操天天操天天操|www.shdianci.com

學(xué)無先后，達(dá)者為師

網(wǎng)站首頁 編程語言 正文

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

作者：Divine0 ? 更新時間： 2022-10-03 編程語言

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

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

const pasteImageRef = useRef<HTMLDivElement>(null);
useEffect(()=>{
?? ?//給組件添加監(jiān)聽粘貼事件
?? ?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)聽事件

事件監(jiān)聽

添加事件監(jiān)聽

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

移除事件監(jiān)聽

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

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

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

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

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

1. 匿名函數(shù)

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

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

從上面的實例寫法來說，很明顯添加和移除事件時因為使用的是匿名函數(shù)，所以會返回兩個不同的地址，這兩個事件不同，所以無法移除事件

2. 命名函數(shù)

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

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

以上是常用的使用命名函數(shù)的寫法，但其實這樣寫還是不對的，每次加上bind之后返回的函數(shù)并不是指向同一個函數(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ù)，那么就要換種寫法，解決方法是先在constructor中提前聲明好

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

3. 箭頭函數(shù)

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

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

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

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

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

  • listener

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

  • options(可選)

一個指定有關(guān) listener 屬性的可選參數(shù)對象。可用的選項如下：

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

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

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

addEventListener(type, listener, false)

原文鏈接：https://blog.csdn.net/Divine0/article/details/124471381

欄目分類
最近更新