JavaScript中事件冒泡的示例分析

這篇文章主要介紹JavaScript中事件冒泡的示例分析，文中介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們一定要看完！

什么是事件冒泡？

事件冒泡剛好與事件捕獲相反，當前元素---->body ----> html---->document ---->window。當事件發(fā)生在DOM元素上時，該事件并不完全發(fā)生在那個元素上。在冒泡階段，事件冒泡，或者事件發(fā)生在它的父代，祖父母，祖父母的父代，直到到達window為止。

假設有如下的 HTML 結(jié)構：

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

對應的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方法具有第三個可選參數(shù)useCapture，其默認值為false，事件將在冒泡階段中發(fā)生，如果為true，則事件將在捕獲階段中發(fā)生。如果單擊child元素，它將分別在控制臺上打印child，parent，grandparent，html，document和window，這就是事件冒泡。

以上是“JavaScript中事件冒泡的示例分析”這篇文章的所有內(nèi)容，感謝各位的閱讀！希望分享的內(nèi)容對大家有幫助，更多相關知識，歡迎關注億速云行業(yè)資訊頻道！