JavaScriptイベントpreventDefault,stopPropagationクリア

https://medium.com/p/eac7d4343f99からの投稿です.

作成時間:2021-11-23

Change Logs

2022/04/02 09:39 : default eventに関するエラー概念

を修正

Javascriptイベントを使用する場合、Bubbling、Capturing、preventDefault、stopPropagationの概念のみを機械的に理解し、論理を実現するための具体的な操作方法を知らない.開発者として、具体的なアルゴリズムと概念が頭の中で確立されていない問題に注目し続け、好奇心が発生すると、例題に戻り、具体的な正確な概念を確定するのに無限の時間を稼ぐ.この例を理解すれば、preventDefaultとstopPropagationを正しく使用できると信じています.
説明に先立ち,BubblingとCapturingの概念は他の部分の位置づけにおいてよく整理されているだけでなく,その概念がすでに知られていると仮定した場合に行われる.
Web上で発生するイベントは大きく分けて2つに分けられます.

障害イベント : デフォルトでは、タグ実行イベント

アクティブリスナー : イベントにaddEventListenerで追加されたコールバック関数

この2つの状況は、キャプチャフェーズ、Bubblingフェーズの流れによって大きく変化します.イベントリスナーは、通常、デバッガ処理後にBubblingフェーズで動作するか、またはBubblingフェーズに渡すことができ、addEventListener関数の3番目のパラメータによって決定される.defultイベントは、すべてのフェーズが終了した後にのみ、最初にサブエレメントを起動し、親を実行します.このような大きな傾向の下で,前述したpreventDefault,stopPropagationの概念と結びつけて,この2つの動作が何をしているのかをまとめる.

stopPropagation アクション

簡単にまとめます.

Phaseにより伝播を停止した.

障害イベントは、

のままです.
する動作をとる.以下の例を見てみましょう.

<div class="box1">
  box1
  <div class="box2">
    box2
    <div class="box3">
      box3
      <div class="box4">
        box4
        <div class="box5">
          box5
        </div>
      </div>
    </div>
  </div>
</div>
<script>
  const box1 = document.querySelector('.box1');
  const box2 = document.querySelector('.box2');
  const box3 = document.querySelector('.box3');
  const box4 = document.querySelector('.box4');
  const box5 = document.querySelector('.box5');
  box1.addEventListener('click', e => { console.log('box1 clicked') })
  box2.addEventListener('click', e => { console.log('box2 clicked') })
  box3.addEventListener('click', e => { e.stopPropagation(); console.log('box3 clicked') }, true)
  box4.addEventListener('click', e => { console.log('box4 clicked') })
  box5.addEventListener('click', e => { console.log('box5 clicked') })
 </script>

現在  .box1>.box2>.box3>.box4>.box5のように、要素は配置状態にあり、各クリックイベントリスナーは設定状態にある.まだあります.  .box3を除くすべての要素はBubblingフェーズに従います.  .box3万Capture Phaseに従います.
いったん  .box3のイベントリスナーからe.stopPropagation()コードを削除すると、  .box5をクリックすると、コンソール出力結果はbox3 clicked, box5 clicked, box4 clicked, box2 clicked, box1 clickedに従います.ブラウザではキャプチャフェーズが  .box3のイベントリスナーが動作し、その後、キャプチャフェーズに後続のイベントリスナーが存在しないため、Bubblingフェーズが行われる.e.stopPropagation()が挿入されると、キャプチャフェーズからイベント伝播はブロックされ、残りのイベントリスナーは実行されなくなる.
ただし、デフォルトのイベントは続行されます.Phaseの進行は早めに終わっただけなので、Phaseの進行中にe.preventDefault()に遭遇しませんでした!

PreventDefault アクション

簡単にまとめます.

フェーズのすべての要素のイベントを防止するポーリングイベント

の繁殖を維持します.

特性を持つ.今回も例を通して確認してみます.

<form action="https://naver.com" method="post">
  <button type="submit">
    <a href="https://test.com">child</a>
  </button>
</form>
<script>
  const form = document.querySelector('form');
  const button = document.querySelector('button');
  const link = document.querySelector('a');
  
  form.addEventListener('click', (e) => { console.log('form clicked'); });
  button.addEventListener('click', (e) => { e.preventDefault(); console.log('submit button clicked'); });
  link.addEventListener('click', (e) => { console.log('link clicked'); });
 </script>

フォームにはsubmitボタンがあり、submitボタンのサブアイテムにはラベルがあります.submit button内にaタグがあるのは明らかにWeb規格に違反している(button内にはaタグのようなインタラクティブな内容のほかに文法的な内容しかないかもしれない.参照:https://developer.mozilla.org/ko/docs/Web/HTML/Element/button)が、イベントアルゴリズムの用途を検証するために、Web規格を少し無視しましょう.
a要素をクリックします.結論から言えばtestcomに移動するデバッガイベントは発生せず、進行フェーズでe.preventDefault()に遭遇し、フェーズ内のすべての要素のデバッガイベントを防止した.
しかしpreventDefaultが行われても,イベント伝播の段階は止まらない.コンソールにはlink clicked, submit button clicked, form clickedが正常に表示されます.これにより,イベントリスナーとデバッガイベントはこのように単独で行われると結論した.
フェーズが完了すると、Default Eventは最初のサブアイテムから実行されます.フェーズでstopPropagation()に遭遇した場合、フェーズは終了し、Defaultイベントはブロックされません.逆に、preventDefaultに遭遇した場合、フェーズは続行され、フェーズ終了後はDefaultイベントは実行されません.