Why does preventDefault on checkbox click event returns true for the checked attribute?

I am just curious and need some explanation on the following situation.

Let's say i have an input element of type checkbox with an eventlistener attached to it, listening for the click event. I prevent the default behavior of the checkbox and log the checked state of the checkbox, which will always return true.

The visual representation of the checkbox is telling me that it is not checked. So i would assume that the checked state would return false. I am sure this must be something silly and i am definitively misunderstanding something here. The funny thing is, i am logging the event itself as well. Inside of the target property the checked property is set to false, just as i would have expected.

From my understanding, prevent default will cancel the event without stopping propagation, so what exactly is happening here?

It would be great if someone could enlighten me on this one. Here is the example.

var checkbox = document.getElementsByTagName('input')[0],
    output = document.getElementById('output');

checkbox.addEventListener('click', function(evt) {
  evt.preventDefault();
  output.innerHTML = "Checkbox checked attribute is " + this.checked;
  console.log(this.checked, evt.target.checked);
  console.log(evt);
}, false);

<input type="checkbox" id="my-checkbox" />
<label for="my-checkbox">Checkbox with preventDefault().</label>
<div id="output"></div>

Solution 1:

Actually, the result of the checked value in a click handler is implementation dependent.

As I tested in several browsers, Chrome/Firefox/Safari/Opera will always return true in this case, but IE/Edge's behavior gets a bit weird if you keep clicking on that checkbox element.

And I found this paragraph in the spec, which might be a explanation of this inconsistency:

Note: During the handling of a click event on an input element with a type attribute that has the value "radio" or "checkbox", some implementations may change the value of this property before the event is being dispatched in the document. If the default action of the event is canceled, the value of the property may be changed back to its original value. This means that the value of this property during the handling of click events is implementation dependent.

But when I removed the preventDefault statement, the results in IE/Edge are consistent with the other browsers, which confuses me.

So I don't think it is IE/Edge's intended behavior… Therefore I filed a bug on Microsoft Connect.

After all, if we presume Chrome's behavior to be standard-compliant, then the following might be a suitable explanation:

According to the HTML Spec, an input[type=checkbox] element's checkedness is restored at the canceled activation process, which comes after the event handlers according to the Activation section. So during the execution of event handlers, the element's checkedness hasn't been restored yet.

(The spec doesn't explicitly state that canceled activation steps must come after all the event handlers; but it's easy to infer because otherwise there's no way to determine the event's canceled state)

Solution 2:

According to w3schools "The preventDefault() method cancels the event if it is cancelable, meaning that the default action that belongs to the event will not occur." The click event is cancelable (you can check it like this console.log("cancelable? "+ evt.cancelable);. So from what I understand, the default behavior of click event for a checkbox object is to read the current state of a checkbox and alternate between true and false, consequently changing its state to checked and unchecked. In shorter words the default behavior is toggling; therefore, preventDefault() cancels that behavior.

In relation to checkboxes checked = true; unchecked = false.If you try to debug and follow eventListener step by step you will see that once you in it the unchecked box becomes "checked" even after stepping on evt.preventDefault() so when you call console.log(this.checked, evt.target.checked); at that time for the compiler your box is "checked", the checkbox goes back to "unchecked" state only when eventListener done execution. From this I can conclude that in case with checkboxes preventDefault() is actually activated(executed) at very last after all calls within event listener is executed.