title: what is the connection of event propagation in event delegation?
body: <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>const ul = document.querySelector("ul");
  ul.addEventListener(
    "click",
    (event) =&gt; {
      console.log(event.target);
    },
    true
  );</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;ul&gt;
    &lt;li&gt;
      &lt;h2&gt; ITEM 1 &lt;/h2&gt;
    &lt;/li&gt;
    &lt;li&gt;
      &lt;h2&gt; ITEM 2 &lt;/h2&gt;
    &lt;/li&gt;
  &lt;/ul&gt;</code></pre>
  </div>
  </div>
  </p>
  <p>how is event propagation involved in this event listener? (is it involved at all?) since changing the third argument of the event listener does nothing in this code snippet, I can't understand the connection of event propagation here</p>
  <p>in the above code; <code>event.target</code> always refers to the <code>h2</code> element if we click on it, and never refers to the <code>li</code>, even though we have enabled capturing phase in this example.</p>