JS中事件冒泡

犀牛前端部落 分类:面试题

讲到JS中的事件冒泡,就必须提一下JS中的事件流,事件流不是本篇文章重点,如果有兴趣,可以查看俺的这篇文章

当一个事件发生在一个DOM元素上时,该事件不会完全发生在这个元素上。在冒泡阶段,事件冒泡起来或者说它到达父结点,祖父母结点,祖父结点的父结点直到它到达window为止。

如果我们有这样一个HTML结构

 <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->parent->grandparent->html->document->window。

这就是事件冒泡。

该系列为面试题系列,俺的答案可能也存在瑕疵或不正确的地方,欢迎大家踊跃讨论。

回复

我来回复
  • 暂无回复内容