title: Why does preventDefault on checkbox click event returns true for the checked attribute?
body: <p>I am just curious and need some explanation on the following situation.</p>
  
  <p>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.</p>
  
  <p>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.</p>
  
  <p>From my understanding, prevent default will cancel the event without stopping propagation, so what exactly is happening here?  </p>
  
  <p>It would be great if someone could enlighten me on this one. Here is the example.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>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);</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;input type="checkbox" id="my-checkbox" /&gt;
  &lt;label for="my-checkbox"&gt;Checkbox with preventDefault().&lt;/label&gt;
  &lt;div id="output"&gt;&lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>