なんかのテキストで
addEventListener の第３引数に false をつける箇所があった

  const lists = document.getElementById('lists');
  const target = document.getElementById('btn');
  target.addEventListener('click', function() {
    const form = document.getElementById('name');
    const list = document.createElement('li');
    list.textContent = form.value;
    lists.appendChild(list);
    form.value = "";
  },false); (←ここ)

これってなんだって思って調べた

どうやらキャプチャフェーズとバブリングフェーズの制御をしているらしい

イベントの伝播が
親要素から起こるのと
イベント発生部から起こるかの違いとのこと

なるほど全然分からん。
って思いいろいろ試してみた

第３引数が false の場合

<body>
  <div id="div1">
    div1
    <div id="div2">
      div2
        <div id="div3">
          div3
        </div>
    </div>
  </div>
  <script>
    const target1 = document.getElementById("div1")
    const target2 = document.getElementById("div2")
    const target3 = document.getElementById("div3")
    target1.addEventListener("click", () => {
      alert("div1")
    }, false)
    target2.addEventListener("click", () => {
      alert("div2")
    }, false)
    target3.addEventListener("click", () => {
      alert("div3")
    }, false)
  </script>
</body>
</html>

こんなコードがあるとして

div3 をクリックするとイベントの伝播が起きるので
div3　⇒　div2 ⇒　div1 の順でアラートがでる

第３引数が true の場合

<body>
  <div id="div1">
    div1
    <div id="div2">
      div2
        <div id="div3">
          div3
        </div>
    </div>
  </div>
  <script>
    const target1 = document.getElementById("div1")
    const target2 = document.getElementById("div2")
    const target3 = document.getElementById("div3")
    target1.addEventListener("click", () => {
      alert("div1")
    }, true)
    target2.addEventListener("click", () => {
      alert("div2")
    }, true)
    target3.addEventListener("click", () => {
      alert("div3")
    }, true)
  </script>
</body>
</html>

このコードも上と同じ
ただ第３引数は true にしている

今回は div3 をクリックすると親要素からイベントの伝播が起きる
つまり
div1　⇒　div2 ⇒　div3 の順でアラートがでる