JSイベントバブリング原理の徹底分析：イベントバブリングの詳細説明

<div id="grandparent" onclick="console.log('grandparent clicked')">
  <div id="parent" onclick="console.log('parent clicked')">
    <div id="child" onclick="console.log('child clicked')">
      点击我
    </div>
  </div>
</div>

<div id="grandparent" onclick="console.log('grandparent clicked')">
  <div id="parent" onclick="console.log('parent clicked')">
    <div id="child" onclick="console.log('child clicked')">
      点击我
    </div>
  </div>
</div>

<script>
  // 获取DOM元素
  var grandparent = document.getElementById('grandparent');
  var parent = document.getElementById('parent');
  var child = document.getElementById('child');

  // 给child元素绑定事件监听器
  child.addEventListener('click', function(event) {
    console.log('child clicked');
    event.stopPropagation(); // 阻止事件继续向上级元素冒泡
  });

  // 给parent元素绑定事件监听器
  parent.addEventListener('click', function(event) {
    console.log('parent clicked');
    event.stopPropagation(); // 阻止事件继续向上级元素冒泡
  });

  // 给grandparent元素绑定事件监听器
  grandparent.addEventListener('click', function(event) {
    console.log('grandparent clicked');
    event.stopPropagation(); // 阻止事件继续向上级元素冒泡
  });
</script>

<div id="parent">
  <div id="child1">子元素1</div>
  <div id="child2">子元素2</div>
  <div id="child3">子元素3</div>
</div>

<script>
  // 获取parent元素
  var parent = document.getElementById('parent');

  // 通过事件代理，给parent元素绑定点击事件监听器
  parent.addEventListener('click', function(event) {
    var target = event.target;
    var id = target.id;
    console.log('子元素' + id + '被点击');
  });
</script>