JavaScript中事件捕獲的示例分析

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

什么是事件捕獲？

當事件發生在 DOM 元素上時，該事件并不完全發生在那個元素上。在捕獲階段，事件從window開始，一直到觸發事件的元素。window----> document----> html----> body ---->目標元素

假設有如下的 HTML 結構：

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

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