Preventing from default behavior even though preventDafault() method has not been called yet

Question

In this piece of code there is an element called container and a checkbox in it. There is an EventListener on the container which calls a function if a click event happens on its child or itself. This function prevents browser from performing default action when this event happens. So when the checkbox is clicked it does not toggle its checked state.

document.querySelector(".container").addEventListener("click" , function(e){
  e.preventDefault() 
})

.container{
  padding:2rem;
  background-color: blue;
}

<div class="container">
  <input type="checkbox">
</div>

I expected the checkbox to be checked when it's clicked because it happens before telling the browser to prevent from default behavior. That function will be called on the bubbling phase of the event and at that point the checkbox is already clicked, I don't understand why before the function is called the checkbox prevents default behavior?