title: Why the onclick element will trigger twice for label element
body: <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>      window.onload = function(){
           var wow = document.getElementById("wow");
        wow.onclick = function(){
            alert("hi");
        }
        }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>    &lt;label id="wow"&gt;&lt;input type="checkbox" name="checkbox" value="value"&gt;Text&lt;/label&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>This is my code, when I clicked on "Text" it will alert hi twice but when I clicked on the box, the <code>onclick</code> element will only trigger once, why?</p>