22
2020
05

什么是事件冒泡?

当事件发生在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元素,它将分别在控制台上记录child,parent,grandparent,html,document和window,这就是事件冒泡。

« 上一篇 下一篇 »

发表评论:

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。