React實現監聽貼上事件並獲取貼上板中的截圖

2022-08-08 22:01:18

監聽貼上事件並獲取貼上板中的截圖

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)

以上為個人經驗，希望能給大家一個參考，也希望大家多多支援it145.com。