イベントのバブリングにおけるターゲット要素の取得

二つの要素があるとします： div と、 そのdivの中にある段落 p です：

html<div>
  <p></p>
</div>

divへの参照を変数に取得しましょう：

javascriptlet div = document.querySelector('div');

タグにスタイルを追加します：

cssdiv {
  padding: 20px;
  border: 1px solid red;
}

p {
  width: 200px;
  height: 200px;
  border: 1px solid green;
}

ここで、divにクリックイベントハンドラを設定します：

javascriptdiv.addEventListener('click', function() {
  console.log('click');
});

divに padding があるため、 divをクリックするとき、段落（p）の上をクリックする場合と、 段落がないdivの部分を直接クリックする場合があります。

このとき、クリックハンドラ内の this は常に、 ハンドラが設定された要素（この場合はdiv）を指します：

javascriptdiv.addEventListener('click', function() {
  console.log(this); // div
});

しかし、イベントが実際に発生したタグを取得することができます。 これには event.target の中身を確認します：

javascriptdiv.addEventListener('click', function(event) {
  console.log(event.target); // div または p
});

条件分岐を使ってこれら2つのケースを区別できます：

javascriptlet div = document.querySelector('div');

div.addEventListener('click', function(event) {
  if (event.target.tagName === 'DIV') {
    console.log('div自体がクリックされました');
  }
  if (event.target.tagName === 'P') {
    console.log('段落がクリックされました');
  }
});

tagName の代わりに matches も使用できます：

javascriptlet div = document.querySelector('div');

div.addEventListener('click', function(event) {
  if (event.target.matches('div')) {
    console.log('div自体がクリックされました');
  }
  if (event.target.matches('p')) {
    console.log('段落がクリックされました');
  }
});

html<div>
  <ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
  </ul>
</div>

cssdiv, ul, li {
  padding: 20px;
}

div {
  border: 1px solid red;
}
ul {
  border: 1px solid orange;
}
li {
  border: 1px solid green;
}