イベントバインディングとイベントモニタリング

• 一般的なイベントリスナー関数を作成する

  function bindEvent(elem, type, selector, fn) {
        
        
              if (fn == null){
        
        
                  fn = selector
                  selector = null
              }
              elem.addEventListener(type, event => {
        
        
                  const target = event.target
                  if(selector) {
        
        
                      // 代理绑定
                      if (target.matches(selector)){
        
        
                          fn.call(target, event)
                      }
                  } else {
        
        
                      // 普通绑定
                      fn.call(target, event)
                  }
              })
          }
  

• イベントバブリングの流れを説明する

  • DOMツリー構造に基づく
  • イベントはトリガー要素に沿ってバブルアップします
  • アプリケーションシナリオ：イベントエージェント

• 写真の無限のドロップダウンリスト、各写真のクリックを監視する方法

  • イベントエージェント
  • e.targetを使用してトリガー要素を取得します
  • 一致を使用して、要素をトリガーするかどうかを決定します