JavaScript Web API 3 日目のメモ

ここに画像の説明を挿入します

Web API - 3 日目

イベントの進行について詳しく学び、よりインタラクティブな Web ページの特殊効果を実現し、イベントストリームの特性を組み合わせてイベント実行の効率を最適化します。

イベントの勃発を止める方法を学ぶ
イベント委任の実装原則を理解する

イベントストリーム

イベントフローはイベントの実行プロセスを記述したもので、イベントの実行プロセスを理解することで、イベントへの理解が深まり、開発実践におけるイベントの使用の柔軟性が向上します。

外部リンク画像の転送に失敗しました。ソースサイトにはリーチ防止メカニズムが備わっている可能性があります。画像を保存して直接アップロードすることをお勧めします。

上図にあるように、イベントが発生すると必ず「キャプチャステージ」と「バブリングステージ」の2つのステージを経ます。

つまり、捕獲段階は［父から息子へ］の伝達過程であり、バブリング段階は［息子から父へ］の伝達過程である。

キャプチャとバブル

イベントフローとは何かを理解した後、イベントフローがイベントの実行にどのような影響を与えるかを見てみましょう。

<body>
  <h3>事件流</h3>
  <p>事件流是事件在执行时的底层机制，主要体现在父子盒子之间事件的执行上。</p>
  <div class="outer">
    <div class="inner">
      <div class="child"></div>
    </div>
  </div>
  <script>
    // 获取嵌套的3个节点
    const outer = document.querySelector('.outer');
    const inner = document.querySelector('.inner');
    const child = document.querySelector('.child');
		
    // html 元素添加事件
    document.documentElement.addEventListener('click', function () {
      
      
      console.log('html...')
    })
		
    // body 元素添加事件
    document.body.addEventListener('click', function () {
      
      
      console.log('body...')
    })

    // 外层的盒子添加事件
    outer.addEventListener('click', function () {
      
      
      console.log('outer...')
    })
    
    // 中间的盒子添加事件
    outer.addEventListener('click', function () {
      
      
      console.log('inner...')
    })
    
    // 内层的盒子添加事件
    outer.addEventListener('click', function () {
      
      
      console.log('child...')
    })
  </script>
</body>

上記のコードを実行すると、クリックイベントがトリガーされると、その先祖要素のクリックイベントも次々にトリガーされることがわかりました。これはなぜでしょうか?

イベントフローの特性と組み合わせると、要素のイベントがトリガーされると、イベントは常にその祖先を通過してから現在の要素に到達し、その後、現在の要素から祖先に渡されることがわかります。フロープロセス中にイベントが発生すると、イベントがトリガーされます。

さらに注目すべき点は、イベントが次々と発生する「実行順序」で、イベントの実行順序はキャプチャフェーズでもバブリングフェーズでも制御可能です。

イベントがバブリングステージで実行される場合、それをバブリングモードと呼びます。最初に子ボックスイベントが実行され、次に親ボックスイベントが実行されます。デフォルトはバブリングモードです。

イベントがキャプチャフェーズで実行される場合、これをキャプチャモードと呼び、最初に親ボックスイベントを実行し、次に子ボックスイベントを実行します。

<body>
  <h3>事件流</h3>
  <p>事件流是事件在执行时的底层机制，主要体现在父子盒子之间事件的执行上。</p>
  <div class="outer">
    <div class="inner"></div>
  </div>
  <script>
    // 获取嵌套的3个节点
    const outer = document.querySelector('.outer')
    const inner = document.querySelector('.inner')

    // 外层的盒子
    outer.addEventListener('click', function () {
      
      
      console.log('outer...')
    }, true) // true 表示在捕获阶段执行事件
    
    // 中间的盒子
    outer.addEventListener('click', function () {
      
      
      console.log('inner...')
    }, true)
  </script>
</body>

結論は：

addEventListener3 番目のパラメーターは、イベントがキャプチャフェーズでトリガーされるかバブリングフェーズでトリガーされるかを決定します。
addEventListener3 番目のパラメータはtrueキャプチャフェーズトリガーを示し、falseバブリングフェーズトリガーを示します。デフォルト値は次のとおりです。false
イベントフローは、親要素と子要素が同じイベントタイプを持つ場合にのみ効果があります。
ほとんどのシーンではデフォルトのバブリングモードが使用されます (理由の 1 つは、初期の IE がキャプチャをサポートしていなかったことです)

泡立つのをやめる

バブリングの防止とは、イベントのフローをブロックして、イベントが現在の要素でのみ実行され、対応する祖先要素に影響を与えないようにすることを意味します。

<body>
  <h3>阻止冒泡</h3>
  <p>阻止冒泡是指阻断事件的流动，保证事件只在当前元素被执行，而不再去影响到其对应的祖先元素。</p>
  <div class="outer">
    <div class="inner">
      <div class="child"></div>
    </div>
  </div>
  <script>
    // 获取嵌套的3个节点
    const outer = document.querySelector('.outer')
    const inner = document.querySelector('.inner')
    const child = document.querySelector('.child')

    // 外层的盒子
    outer.addEventListener('click', function () {
      
      
      console.log('outer...')
    })

    // 中间的盒子
    inner.addEventListener('click', function (ev) {
      
      
      console.log('inner...')

      // 阻止事件冒泡
      ev.stopPropagation()
    })

    // 内层的盒子
    child.addEventListener('click', function (ev) {
      
      
      console.log('child...')

      // 借助事件对象，阻止事件向上冒泡
      ev.stopPropagation()
    })
  </script>
</body>

結論: イベントオブジェクトのメソッドは、ev.stopPropagationイベントのバブリングを防ぐために特に使用されます。

マウスオーバーイベント:

マウスオーバーとマウスアウトにはバブリング効果があります

Mouseenter と MouseLeave にはバブリング効果がありません (推奨)

イベントの代表団

イベント委任は、イベントストリームの特性を使用して実際の開発ニーズを解決する知識とスキルであり、その主な機能はプログラムの効率を向上させることです。

次のコードに示すように、多数のイベント監視は比較的パフォーマンスに負荷がかかります。

<script>
  // 假设页面中有 10000 个 button 元素
  const buttons = document.querySelectorAll('table button');

  for(let i = 0; i <= buttons.length; i++) {
      
      
    // 为 10000 个 button 元素添加了事件
    buttons.addEventListener('click', function () {
      
      
      // 省略具体执行逻辑...
    })
  }
</script>

イベントストリームの特性を使用して、上記のコードを最適化できます。イベントのバブリングモードでは、常にイベントがその親要素にフローされます。親要素が同じイベントタイプをリッスンする場合、親要素のイベントは次のコードに示すように、上記のコードを最適化するために使用されるのはこの機能です。

<script>
  // 假设页面中有 10000 个 button 元素
  let buttons = document.querySelectorAll('table button');
  
  // 假设上述的 10000 个 buttom 元素共同的祖先元素是 table
  let parents = document.querySelector('table');
  parents.addEventListener('click', function () {
      
      
    console.log('点击任意子元素都会触发事件...');
  })
</script>

私たちの最終的な目標は、ボタンのサブ要素がクリックされたときにのみイベントのコールバック関数が実行されるようにすることです。ユーザーがどのサブ要素をクリックしたかを判断するにはどうすればよいでしょうか?

イベントオブジェクト内の1 つtargetまたは複数の属性srcElementは、実際にイベントをトリガーした要素 (要素タイプのノード) を表します。

<script>
  // 假设页面中有 10000 个 button 元素
  const buttons = document.querySelectorAll('table button')
  
  // 假设上述的 10000 个 buttom 元素共同的祖先元素是 table
  const parents = document.querySelector('table')
  parents.addEventListener('click', function (ev) {
      
      
    // console.log(ev.target);
    // 只有 button 元素才会真正去执行逻辑
    if(ev.target.tagName === 'BUTTON') {
      
      
      // 执行的逻辑
    }
  })
</script>

最適化されたコードでは、祖先要素にイベントリスナーのみが追加されるため、10,000 個の要素にイベントリスナーを追加するよりもはるかに効率的です。！！

その他のイベント

ページ読み込みイベント

外部リソース (画像、外部 CSS、JavaScript など) が読み込まれるときにトリガーされるイベント。

何かを行うために、すべてのページリソースが処理されるまで待つ必要がある場合があります。

イベント名：ロード

監視ページ上のすべてのリソースがロードされました。

window.addEventListener('load', function() {
    
    
    // xxxxx
})

要素スクロールイベント

スクロールバーのスクロール中に継続的にトリガーされるイベント

window.addEventListener('scroll', function() {
    
    
    // xxxxx
})

ページサイズイベント

ウィンドウサイズが変更されるとイベントがトリガーされます。

window.addEventListener('resize', function() {
    
    
    // xxxxx
})

要素のサイズと位置

要素自体によって設定された幅と高さ、パディング、境界線を含む、要素自体の幅と高さを取得します。

オフセット幅とオフセット高さ

得られるのは数値なので計算に便利です。

注: 取得されるのは表示されている幅と高さです。ボックスが非表示の場合、取得される結果は 0 です。