事件冒泡傳遞的疑問

capturing 或 bubbling傳遞

Amigo 2019-03-11 09:33:03 ‧ 1474 瀏覽

分享至

請問...
在這篇文章:
https://ithelp.ithome.com.tw/articles/10192015

[阻擋事件冒泡傳遞]裡的例子:

<html>
<body>

<label class="lbl">
  myLabel <input type="checkbox" name="chkbox" id="chkbox">
</label>

<script>
var lbl = document.querySelector('.lbl');
var chkbox = document.querySelector('#chkbox');

lbl.addEventListener('click', function (e) {
  console.log(this.tagName + ' lbl click');
}, false);

chkbox.addEventListener('click', function (e) {
  console.log(this.tagName + ' chkbox click');
}, false);

</script>
</body>
</html>

和改成這樣:

<html>
<body>

<div id=prt>
  myLabel <input type="checkbox" name="chkbox" id="ckb">
</div>

<script>
var lbl = document.getElementById('prt');
var chkbox = document.getElementById('ckb');

lbl.addEventListener('click', function (e) {
  console.log(this.tagName + ' lbl click');
}, false);

chkbox.addEventListener('click', function (e) {
  console.log(this.tagName + ' chkbox click');
}, false);

</script>
</body>
</html>

有誰可以說明一下結果為什麼不一樣嗎?