JavaScript中事件冒泡的示例分析

这篇文章主要介绍JavaScript中事件冒泡的示例分析，文中介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们一定要看完！

什么是事件冒泡？

事件冒泡刚好与事件捕获相反，当前元素---->body ----> html---->document ---->window。当事件发生在DOM元素上时，该事件并不完全发生在那个元素上。在冒泡阶段，事件冒泡，或者事件发生在它的父代，祖父母，祖父母的父代，直到到达window为止。

假设有如下的 HTML 结构：

  
    
1
  

对应的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，这就是事件冒泡。

以上是"JavaScript中事件冒泡的示例分析"这篇文章的所有内容，感谢各位的阅读！希望分享的内容对大家有帮助，更多相关知识，欢迎关注行业资讯频道！