イベントバブリング

HTML

<h1>イベントバブリング</h1>
<h2>参考リンク</h2>
  <ul>
  <li><a href="https://teratail.com/questions/205789#">JavaScript - for文における、letとvarの挙動の違い｜teratail</a></li>
  <li><a href="https://triple-underscore.github.io/uievents-ja.html#event-flow">3.1. イベント配送と DOM イベントフロー - UI Events （日本語訳）</a></li>
</ul>
  <section id="sample">
    <h2>サンプル</h2>
    <p class="plus">+</p>
    <p class="plus">+</p>
    <p class="plus">+</p>
  </section>

CSS

.plus {
  color: #00AED9;
  text-align: center;
  line-height: 15px;
  border: solid #DADADA 2px;
  border-radius: 50%;
  width: 20px;
  height: 20px;
  font-weight: bold;
  font-size: 20px;
}

JavaScript

'use strict';
document.getElementById('sample').addEventListener('click', function handleClick (event) {
  const target = event.target;

  if (!target.classList.contains('plus')) return;

  target.textContent = target.textContent === '+' ? '-' : '+';
}, false);
/*