事件处理问题与标签和输入内部

Question

使用标签进行事件处理的问题可以由任何正文解释确切的行为

  <ul onclick="console.log('parent')" style="padding:15px; background-color:grey;" >
<li>
  <label style="padding:10px; background-color:white;">Checkbox with input has the click handler 
    <input type="checkbox" onclick="console.log('checked box is clicked')"/>
  </label>
</li>

输出： 点击标签

“父”

“点击复选框”

“父”

 <ul onclick="console.log('parent')" style="padding:15px; background-color:grey;" >
<li>
  <label onclick="console.log('checked box is clicked')" style="padding:10px; background-color:white;">Checkbox label has the click handler
    <input type="checkbox" />
  </label>
</li>

输出： 点击标签

“点击复选框”

“父”

“点击复选框”

“父”

jsbin link for ref

我想知道为什么？单击标签时，将首先触发父级的事件处理程序。