前端杂谈 · Web

什么是事件冒泡?

•̀.̫•́✧ · 1月8日 · 2020年本文1249字 · 阅读4分钟206

当一个 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 协议,如果我们的工作有侵犯到您的权益,请及时联系我们。

0 条回应