1.イベントバブリング

イベントバブリング：構造的（非視覚的）ネスト関係にある要素は、イベントバブリング、つまり同じイベントの機能を持ち、子要素から親要素にバブリングします。

イベントキャプチャとイベントバブリングのプロセス図について：2つの順序は、最初にキャプチャしてからバブリングすることです。
ここに画像の説明を挿入
イベントバブリングとは、親ボックスの要素がクリックされ、子要素のイベントが最初にトリガーされ、次にイベントがトリガーされることです。親ボックスのがトリガーされます。

 <div class="wrapper">
    <div class="content">
      <div class="box"></div>
    </div>
  </div>

  let wrapper = document.getElementsByClassName('wrapper')[0]
  let content = document.getElementsByClassName('content')[0]
  let box = document.getElementsByClassName('box')[0]
    // 冒泡
  wrapper.addEventListener('click',()=>console.log("wrapper1") ,false)
  content.addEventListener('click',()=>console.log("content1") ,false)
  box.addEventListener('click',()=>console.log("box1") ,false)

子要素ボックスをクリックした後の印刷結果は下図のようになり、イベントバブリングが発生しました
ここに画像の説明を挿入

2.イベントキャプチャ

イベントキャプチャ：Google Chrome上のオブジェクトのイベントタイプは1つだけ
です。addEventListenerの3番目のパラメータはfalseからtrueに変わります。バブリングがキャプチャ関数になります。親ボックスが最初にイベントをキャプチャし、子ボックスが
構造をキャプチャします。上部の（視覚的にではない）ネストされた要素には、イベントキャプチャの機能があります。つまり、同じイベントが親要素から子要素（イベントソース要素）にキャプチャされます。

 <div class="wrapper">
    <div class="content">
      <div class="box"></div>
    </div>
  </div>

let wrapper = document.getElementsByClassName('wrapper')[0]
    let content = document.getElementsByClassName('content')[0]
    let box = document.getElementsByClassName('box')[0]

    // 捕获
    wrapper.addEventListener('click',()=>console.log("wrapper") ,true)
    content.addEventListener('click',()=>console.log("content") ,true)
    box.addEventListener('click',()=>console.log("box") ,true)

印刷順序：
ここに画像の説明を挿入
ただし、コードがキャプチャとバブリングを同時に表示できる場合

 wrapper.addEventListener('click',()=>console.log("wrapper") ,true)
    content.addEventListener('click',()=>console.log("content") ,true)
    box.addEventListener('click',()=>console.log("box") ,true)

    wrapper.addEventListener('click',()=>console.log("wrapper1") ,false)
    content.addEventListener('click',()=>console.log("content1") ,false)
    box.addEventListener('click',()=>console.log("box1") ,false)

順序は最初にキャプチャされ、次にバブリングされていることがわかります
ここに画像の説明を挿入

このナゲットでこれについて話してください

3.addEventListener

addEventListenerは、DOM2イベント用に新しく指定されたイベントハンドラーの操作です。このメソッドは、イベントハンドラーの関数として処理されるイベントの名前とブール値の3つのパラメーターを受け取ります。ブール値がtrueの場合、キャプチャしていることを意味します。イベントハンドラはフェーズで呼び出されます。falseの場合は、イベントハンドラがバブリングフェーズで呼び出されていることを意味します。
addEventListenerの3番目のパラメーター

4.イベントの委任

イベントバブリングを使用してイベントソースオブジェクトで処理する
利点：
1。パフォーマンスでは、すべての要素をループしてイベントを1つずつバインドする必要がありません
。2。柔軟性新しい子要素がある場合、イベントを再バインドする必要はありません。

例liラベルをクリックして、対応するラベルの内容を印刷します。
主な知識：イベントオブジェクトイベントおよびイベントソースオブジェクトevent.target

<ul class="ul">
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
    <li>6</li>
    <li>7</li>
    <li>8</li>
  </ul>
  //利用事件冒泡将子元素li的点击事件委托到父元素ul上 点击对应的li答应出li的内容
let ul = document.getElementsByClassName('ul')[0]
    ul.onclick = e => {
    
    
      console.log(e)
      console.log(e.target)
      console.log(e.target.innerText)
    }

補足

フォーカス、ぼかし、変更、送信、リセット、選択などのイベントはバブルしません
バブリングをキャンセルします：
W3C標準event.stopPropagation（）;ただし、ie9IE
固有のevent.cancelBubble = true;より前のバージョンはサポートしていません。
デフォルトイベントの防止：
デフォルトイベント—フォーム
送信、タグジャンプ、右クリックメニューなど。1。falseを返します。オブジェクトプロパティとして登録されたイベントのみが有効になります
。2.event.preventDefault（）; W3Cマーク、IE9および互換性がありません。以下
3.event.returnValue = false; IEと互換性があります

イベントのバブリングとイベントのキャプチャおよびイベントの委任

1.イベントバブリング

2.イベントキャプチャ

3.addEventListener

4.イベントの委任

補足

おすすめ