什么是事件冒泡？

1.0

1.0

当一个 DOM 元素发生 事件 时，事件 并不是完全发生在那个元素上，在 冒泡阶段，事件 会冒起或者流向其父级、祖父级、祖父级的父级，直到到达 window 为止。

如果我们有这样的示例标记。

 <div class="grandparent">
    <div class="parent">
      <div class="child">1</div>
    </div>
  </div>

还有我们的 JS 代码。

function addEvent(el, event, callback, isCapture = false) {
  if (!el || !event || !callback || typeof callback !== 'function') return;
  if (typeof el === 'string') {
    el = document.querySelector(el);
  };
  el.addEventListener(event, callback, isCapture);
}

addEvent(document, 'DOMContentLoaded', () => {
  const child = document.querySelector('.child');
  const parent = document.querySelector('.parent');
  const grandparent = document.querySelector('.grandparent');

  addEvent(child, 'click', function (e) {
    console.log('child');
  });

  addEvent(parent, 'click', function (e) {
    console.log('parent');
  });

  addEvent(grandparent, 'click', function (e) {
    console.log('grandparent');
  });

  addEvent(document, 'click', function (e) {
    console.log('document');
  });

  addEvent('html', 'click', function (e) {
    console.log('html');
  })

  addEvent(window, 'click', function (e) {
    console.log('window');
  })

});

addEventListener 方法有第三个可选参数 useCapture 默认值为 false，事件将会发生在 冒泡阶段，如果为 true 事件会发生在 捕获阶段。如果我们点击 child 元素，它会在 控制台 记录下child,parent,grandparent, html, document 以及 window。这就是 事件冒泡。

本译文仅用于学习和交流目的，转载请务必注明文章译者、出处、和本文链接
我们的翻译工作遵照 CC 协议，如果我们的工作有侵犯到您的权益，请及时联系我们。

原文地址：https://learnku.com/docs/javascript-inte...

译文地址：https://learnku.com/docs/javascript-inte...