TIL:イベント処理とaddEventListenerメソッド(feat:元のプリロードサポートの難題)

reactでaddEventListenerにドキュメントをバインドした場合、どうなりますか?
MouseDownイベントが発生すると、ドキュメントにmousemoveハンドルがバインドされます.mousemoveイベントは、removeEventListenerとして適切なタイミングで無効にする必要があります.そうでないと、明らかに何気ない瞬間にHandlerが実行され、プログラムが意外に実行されます.

ボリュームの例

以下のコンポーネントは、swife機能を持つKeroselの例です.次のコードを見て、mousemoveイベントはswifeハンドルをバインドします.私がさっき言ったように、適切なタイミングでハンドルを閉じないと、swape機能が何気なく起動し、スライドがマウスに従います.リリースした葉巻はsweeEndが動いた瞬間、mouseUp、mouseLeaveイベントが動いた時です.

function Carousel() {
  return <ul
    onMouseDown={event => {
      if (isMoving.current) return;
      event.preventDefault();
      initialMousePosX = event.clientX - offsetX;
      document.addEventListener('mousemove', swapeStart);
    }}
    onMouseUp={swapeEnd}
    onMouseLeave={swapeEnd}
  >
  ...
  </ul>
}

実装中に発生した問題

mouseUpイベントはulラベルにバインドされているため、その外部領域では発生しません.この問題により、Leaveイベントはバインド解除を実現したが、swapeStart Handlerはコードでバインド解除されたが、解除されず、スライドはマウスに従ったことが明らかになった.コンソールでmouseupイベントが発生した瞬間
「end」の文字が印刷されますこれは上のコードには表示されませんが、removeEventListener(「mousemove」、swape Start)と考えられます.

解決策

removeEventListerは、ユーザ効果を達成するために適切な時間に実行することができる.でもいつ消すの?

レンダリングの発生時に消去する必要があります.

mouseUp,mouseLeaveの瞬間に消去すべきであるが,mouseUpは特にulタグから離れても動作することを体現しなければならない.

また、mouseupイベントのオーバーラップバインドを回避するために、次のコードは適切な時間に実行する必要があるため、Effectを使用して適切な時間にmouseupイベントを呼び出す必要があります.かなり複雑に見えます.実際にやってみるとなおさらだ.

document.addEventListener('mouseup', () => { 
  document.removeEventListener('mousemove', swapeStart);
});

Propertyバインドメソッドを使用します.

問題の原因は、レンダーするたびにバインドハンドラがオーバーラップし、複数回呼び出されることです.重なり合ったハンドルを別々に解除するので、そのうちの1つがクリアされていないと予想外の方向に流れます.したがって、Propertyメソッドを使用して構造を変更し、一生に1つのイベントだけをバインドすることができます.

function Carousel() {
  return <ul
    onMouseDown={event => {
      if (isMoving.current) return;
      event.preventDefault();
      initialMousePosX = event.clientX - offsetX;
      document.onmousemove = swapeStart; // 수정된 사항은 바인딩 방식 한줄
    }}
    onMouseUp={swapeEnd}
    onMouseLeave={swapeEnd}
  >
  ...
  </ul>
}

明らかに,Handlerのロック解除は同じであるが,この構造はコードをよりきれいにするオーバーラップバインドに対する懸念を軽減することができる.今回の例のように、1行で問題を解決できる場合もあります.

小さな結論

アクティブなバインド方法の違いを理解し、適切なときに使用します!はい.