脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript技巧 → JS冒泡事件与事件捕获

JS冒泡事件与事件捕获实例详解

 更新时间：2016年11月25日 11:36:17   作者：牛逼的霍啸林  
这篇文章主要介绍了JS冒泡事件与事件捕获,结合实例形式分析了javascript冒泡的原理与阻止冒泡的相关操作技巧,需要的朋友可以参考下

本文实例分析了JS冒泡事件与事件捕获。分享给大家供大家参考，具体如下：

案例

<!DOCTYPE html>
<html>
<head>
  <title>冒泡事件</title>
  <script type="text/javascript">
    window.onload = function(){
      window.onclick = function(){
        alert("Window"); // 顶级
      };
      document.onclick = function(){
        alert("Document"); // 次顶级
      };
      document.documentElement.onclick = function(){
        alert("Html"); // 次次顶级
      };
      document.body.onclick = function(){
        alert("Body"); // 次次次顶级
      };
      document.getElementById("myDiv").onclick = function(){
        alert("Div"); // 最先执行，并且会传递到上一层。点击两次，则按顺序执行两次。如果上级也有点击事件的话
      };
    }
  </script>
</head>
<body>
  <div id="myDiv">点我</div>
</body>
</html>

小结

1.点击myDiv。依次是Div-Body-Html-Document-Window

2.点击其他空白地方。依次是Html-Document-Window

3.连续点击两次，会按顺序执行两次

4.冒泡的前提是，父级也定义了相应的事件

再看一个更复杂的例子

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>事件捕捉</title>
  <script type="text/javascript">
    window.onload = function(){
      window.addEventListener("click", function(){
        alert("Window - true");
      }, true); // true - 事件句柄在捕获阶段执行 ,false- false- 默认。事件句柄在冒泡阶段执行
      document.addEventListener("click", function(){
        alert("Document - true");
      }, true);
      document.documentElement.addEventListener("click", function(){
        alert("Html - true");
      }, true);
      document.body.addEventListener("click", function(){
        alert("Body - true");
      }, true);
      document.getElementById("myDiv").addEventListener("click", function(){
        alert("Div - true");
      }, true);
      window.addEventListener("click", function(){
        alert("Window - false");
      }, false); // true - 事件句柄在捕获阶段执行 ,false- false- 默认。事件句柄在冒泡阶段执行
      document.addEventListener("click", function(){
        alert("Document - false");
      }, false);
      document.documentElement.addEventListener("click", function(){
        alert("Html - false");
      }, false);
      document.body.addEventListener("click", function(){
        alert("Body - false");
      }, false);
      document.getElementById("myDiv").addEventListener("click", function(){
        alert("Div - false");
      }, false);
      window.onclick = function(){
        alert("Window - click"); // 顶级
      };
      document.onclick = function(){
        alert("Document - click"); // 次顶级
      };
      document.documentElement.onclick = function(){
        alert("Html - click"); // 次次顶级
      };
      document.body.onclick = function(){
        alert("Body - click"); // 次次次顶级
      };
      document.getElementById("myDiv").onclick = function(){
        alert("Div - click"); // 最先执行，并且会传递到上一层。点击两次，则按顺序执行两次。如果上级也有点击事件的话
      };
    }
  </script>
</head>
<body>
  <div id="myDiv">点我</div>
</body>
</html>

小结

1.点击的执行结果是

Window - true

Document - true

Html - true

Body - true

Div - true

Div - false

Div - click

Body - false

Body - click

Html - false

Html - click

Document - false

Document - click

Window - false

Window - click

2.顺序与js代码顺序无关

3.就算没有定义点击事件，一样可以捕获点击事件，只要点击到，就能捕获到

再次改造，阻止冒泡

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>事件捕捉</title>
  <script type="text/javascript">
    window.onload = function(){
      document.addEventListener("click", function(){
        alert("Document - true");
      }, true);
      window.addEventListener("click", function(){
        alert("Window - true");
      }, true); // true - 事件句柄在捕获阶段执行 ,false- false- 默认。事件句柄在冒泡阶段执行
      document.documentElement.addEventListener("click", function(){
        alert("Html - true");
      }, true);
      document.body.addEventListener("click", function(){
        alert("Body - true");
      }, true);
      document.getElementById("myDiv").addEventListener("click", function(){
        alert("Div - true");
      }, true);
      window.addEventListener("click", function(){
        alert("Window - false");
      }, false); // true - 事件句柄在捕获阶段执行 ,false- false- 默认。事件句柄在冒泡阶段执行
      document.addEventListener("click", function(){
        alert("Document - false");
      }, false);
      document.documentElement.addEventListener("click", function(){
        alert("Html - false");
      }, false);
      document.body.addEventListener("click", function(){
        alert("Body - false");
      }, false);
      document.getElementById("myDiv").addEventListener("click", function(){
        alert("Div - false");
      }, false);
      window.onclick = function(){
        alert("Window - click"); // 顶级
      };
      document.onclick = function(){
        alert("Document - click"); // 次顶级
      };
      document.documentElement.onclick = function(){
        alert("Html - click"); // 次次顶级
      };
      document.body.onclick = function(){
        alert("Body - click"); // 次次次顶级
      };
      document.getElementById("myDiv").onclick = function(){
        alert("Div - click"); // 最先执行，并且会传递到上一层。点击两次，则按顺序执行两次。如果上级也有点击事件的话
        event.stopPropagation(); // 阻止冒泡
      };
    }
  </script>
</head>
<body>
  <div id="myDiv">点我</div>
</body>
</html>

小结

Window - true

Document - true

Html - true

Body - true

Div - true

Div - false

Div - click

终止了，没有后续的内容了

更多关于JavaScript相关内容感兴趣的读者可查看本站专题：《JavaScript事件相关操作与技巧大全》、《JavaScript时间与日期操作技巧总结》、《JavaScript切换特效与技巧总结》、《JavaScript查找算法技巧总结》、《JavaScript动画特效与技巧汇总》、《JavaScript错误与调试技巧总结》、《JavaScript数据结构与算法技巧总结》、《JavaScript遍历算法与技巧总结》及《JavaScript数学运算用法总结》

希望本文所述对大家JavaScript程序设计有所帮助。

您可能感兴趣的文章:

相关文章

  • Chart.js与ECharts.js图表使用过程组件对比

    Chart.js与ECharts.js图表使用过程组件对比

    chartjs只能基于canvas,虽然只有英文文档,但定制化程度更高,社区成熟,功能就更加稳定,ECharts.js可以基于svg或者canvas去渲染,有融合主流前端框架的社区库,另外ECharts.js还支持3d效果的图表,相当炫酷,国内开发者大多数使用这个,有中文文档
    2023-10-10
  • 用javascript对一个json数组深度赋值示例

    用javascript对一个json数组深度赋值示例

    本节主要介绍了用javascript对一个json数组深度赋值的具体实现，需要的朋友可以参考下
    2014-07-07
  • 深入理解JavaScript系列(10) JavaScript核心（晋级高手必读篇）

    深入理解JavaScript系列(10) JavaScript核心（晋级高手必读篇）

    本篇是ECMA-262-3 in detail系列的一个概述（本人后续会翻译整理这些文章到本系列（第11-19章）。每个章节都有一个更详细的内容链接，你可以继续读一下每个章节对应的详细内容链接进行更深入的了解
    2012-01-01
  • Bootstrap DateTime Picker日历控件简单应用

    Bootstrap DateTime Picker日历控件简单应用

    这篇文章主要介绍了Bootstrap DateTime Picker日历控件的简单应用，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2017-03-03
  • 浅析JavaScript中break、continue和return的区别

    浅析JavaScript中break、continue和return的区别

    这篇文章主要介绍了JavaScript中break、continue和return的区别,非常不错，具有参考借鉴价值，需要的朋友可以参考下
    2016-11-11
  • 小程序ios音频播放没声音问题的解决

    小程序ios音频播放没声音问题的解决

    这篇文章主要介绍了小程序ios音频播放没声音问题的解决，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2018-07-07
  • TypeScript装饰器之项目数据转换详解

    TypeScript装饰器之项目数据转换详解

    这篇文章主要为大家详细介绍了TypeScript项目中是如何进行数据转换的,文中的示例代码简洁易懂,感兴趣的小伙伴可以跟随小编一起学习一下
    2024-10-10
  • 给应用部分的js代码设定一个统一的入口

    给应用部分的js代码设定一个统一的入口

    javascript是种脚本语言，浏览器下载到哪儿就会执行到哪儿，下面为大家介绍下，如何给应用部分的js代码一个统一的入口
    2014-06-06
  • JS学习笔记之数组去重实现方法小结

    JS学习笔记之数组去重实现方法小结

    这篇文章主要介绍了JS学习笔记之数组去重实现方法,结合实例形式总结分析了javascript数组去重的5种常见实现方法及相关操作技巧,需要的朋友可以参考下
    2019-05-05
  • 微信小程序实现折叠面板

    微信小程序实现折叠面板

    这篇文章主要为大家详细介绍了微信小程序实现折叠面板的相关资料，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2018-01-01

最新评论