How can an event bubble to document but not to document.body?

This has got be a jQuery event related problem. With the normal DOM API both document and document.body get notified correctly:

document.addEventListener("click", (e) => {
    if (e.target.tagName === 'BUTTON') {
      console.log("document knows");
    };
});

document.body.addEventListener("click", (e) => {
    if (e.target.tagName === 'BUTTON') {
      console.log("document.body knows");
    };
});

document.querySelector("button").addEventListener("click", function(e) {
  this.parentElement.removeChild(this);
})

<button type="button">Click me</button>

TL/DR: The event bubbles to both body and document. The button is not in DOM at that moment. But for body, before handler execution jQuery tries to ensure that button exists inside it. For document, id does't do such a check.

Explanation

I'm not sure why it's designed like this. It's just explanation why it happens.

First of all, the handlers are bound to document and body respectively, not to the button. When event bubbles to the document, jQuery tries to find descendants, specified by selector (button in our case) and executes the handler against each of them. Same for body. The difference is in the way how it checks the descendants.

When the event is bubbled to document and body, the button is already removed from DOM, but the button element still exists in memory and is accessible via event.target.

for both document and body jQuery searches the elements to execute the handler against:

1. adds event.target (our removed button)
2. adds all buttons found inside parent (body or document) (founds none)
3. filters the result (which is just our button) by some matchers to check if the buttons are really children of parent
4. Executes the handlers against found elements.

The difference in 3rd step.

2 pieces of jQuery code are responsible for this:

https://github.com/jquery/jquery/blob/e743cbd28553267f955f71ea7248377915613fd9/external/sizzle/dist/sizzle.js#L1985

outermostContext = context === document || context || outermost;

https://github.com/jquery/jquery/blob/e743cbd28553267f955f71ea7248377915613fd9/external/sizzle/dist/sizzle.js#L1925

var ret = ( !leadingRelative && ( xml || context !== outermostContext ) ) || (
                (checkContext = context).nodeType ?
                    matchContext( elem, context, xml ) :
                    matchAnyContext( elem, context, xml ) );

First piece sets outermostContext variable.

For document, the outermostContext is true, for body it's body.

Second piece sets variable ret which decides will the handler be called or not.

For body, context !== outermostContext is false so matcher proceeds to 'matchContext' and eventually returns false.

For document, context !== outermostContext is true so the matcher returns true without context check.

The meaning of this is that for body it tries to ensure that button exists inside it. For document - it does not.

Its because there are binding priorities in jQuery. When you click on a element this is the order javascript executes the event.

1. Event on document
2. Event on element
3. Event on the elements parent
4. Event on the parents parent
5. Ect.. Until you arrive to the body.

So what is happening is that you delete the button before you actually arrive to the body.