bubbling
イベントが発生した要素から<html>タグに向けてイベントを確認していき、イベントがあれば発火される
このbubble フェーズの反対となるものがcapture フェーズである
capture フェーズは<html>タグから順にイベントが発生した要素を確認していく
defaultではbubble フェーズとなる
code: example.html
<html>
<head> ... </head>
<body>
<ul id="list">
<li id="item-1">item 1</li>
<li id="item-2">item 2</li>
<li id="item-3">item 3</li>
</ul>
<script>
const list = document.getElementById("list");
list.addEventListener("click", (e) => {
if(!e.target || e.target.nodeName !== "LI") {
return;w
}
const selectedItem =document.getElementById(e.target.id);
console.log(selectedItem.textContent); // output "item 2", if clicked second item
}, true);
</script>
</body>
</html>