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

Posted on by

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

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)

以上為個人經驗，希望能給大傢一個參考，也希望大傢多多支持WalkonNet。 

推薦閱讀：