title: How can an event bubble to document but not to document.body?
body: <p>Recently I ran into some interesting behaviour related to event-bubbling. I have created a code-pen to illustrate this: <a href="https://codepen.io/anon/pen/XGmxXr" rel="noreferrer">https://codepen.io/anon/pen/XGmxXr</a></p>
  
  <p>All I am doing there is bind two event-listeners (or I guess three including the one that removes the button). One on the document and one on the document.body. </p>
  
  <p>When clicking on the button, only the console.log from the document would show up. </p>
  
  <p>Why? Wouldn't the event bubble to document.body first and then to document?</p>
  
  <p>Or asked differently: how can an event bubble up to document but not stop by document.body?</p>
  
  <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>$(document).on("click", "button", () =&gt; console.log("document knows"));
  
  $(document.body).on("click", "button", () =&gt;
    console.log("document body knows")
  );
  
  $("button").on("click", e =&gt; $("button").remove());</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;button&gt;Click me&lt;/button&gt;</code></pre>
  </div>
  </div>
  </p>