编程 Javascript

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

Posted in Javascript onNovember 25, 2016

本文实例分析了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程序设计有所帮助。

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

- Author -

牛逼的霍啸林

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐

js类 from qq

Nov 13 Javascript

jquery 操作日期、星期、元素的追加的实现代码

Feb 07 Javascript

js 跳出页面的frameset框架示例介绍

Dec 23 Javascript

js+div实现图片滚动效果代码

Feb 10 Javascript

简介AngularJS的视图功能应用

Jun 17 Javascript

js滑动提示效果代码分享

Mar 10 Javascript

AngularJS指令与指令之间的交互功能示例

Dec 14 Javascript

Mint UI 基于 Vue.js 移动端组件库

Nov 07 Javascript

vue.js 双层嵌套for遍历的方法详解, 类似php foreach()

Sep 07 Javascript

node上的redis调用优化示例详解

Oct 30 Javascript

javascript关于“时间”的一次探索

Jul 24 Javascript

vue-socket.io接收不到数据问题的解决方法

May 13 Javascript

js事件源window.event.srcElement兼容性写法(详解)

Nov 25 #Javascript

使用JS读取XML文件的方法

Nov 25 #Javascript

JS比较两个数值的大小实例

Nov 25 #Javascript

使用JavaScript解决网页图片拉伸问题(推荐)

Nov 25 #Javascript

js移动焦点到最后位置的简单方法

Nov 25 #Javascript

详解JS几种变量交换方式以及性能分析对比

Nov 25 #Javascript

深入浅析Vue组件开发

Nov 25 #Javascript

You might like

用PHP实现维护文件代码

2007/06/14 PHP

MySQL数据库转移，access，sql server 转 MySQL 的图文教程

2007/09/02 PHP

php is_file()和is_dir()用于遍历目录时用法注意事项

2010/03/02 PHP

分享一个PHP数据流应用的简单例子

2012/06/01 PHP

JS时间选择器兼容IE6,7,8,9

2012/06/26 Javascript

JavaScript之引用类型介绍

2012/08/10 Javascript

用jquery模仿的a的title属性(兼容ie6/7)

2013/01/21 Javascript

删除条目时弹出的确认对话框

2014/06/05 Javascript

JavaScript中的DSL元编程介绍

2015/03/15 Javascript

mvc 、bootstrap 结合分布式图简单实现分页

2016/10/10 Javascript

Json对象和字符串互相转换json数据拼接和JSON使用方式详细介绍(小结)

2016/10/25 Javascript

D3.js实现简洁实用的动态仪表盘的示例

2018/04/04 Javascript

详解vuex中mapState,mapGetters,mapMutations,mapActions的作用

2018/04/13 Javascript

JavaScript中Dom操作实例详解

2019/07/08 Javascript

JS 自执行函数原理及用法

2019/08/05 Javascript

JS中封装axios来管控api的2种方式

2019/09/11 Javascript

JavaScript RegExp 对象用法详解

2019/09/24 Javascript

Layui选项卡制作历史浏览记录的方法

2019/09/28 Javascript

Vue实现base64编码图片间的切换功能

2019/12/04 Javascript

Python版实现微信公众号扫码登陆

2020/05/28 Javascript

[58:42]DOTA2上海特级锦标赛C组败者赛 Newbee VS Archon第一局

2016/02/27 DOTA

github配置使用指南

2014/11/18 Python

Python for循环及基础用法详解

2019/11/08 Python

django自定义非主键自增字段类型详解(auto increment field)

2020/03/30 Python

什么是python的列表推导式

2020/05/26 Python

安全标准化汇报材料

2014/02/03 职场文书

向国旗敬礼学生寄语大全

2014/09/30 职场文书

泸县召开党的群众路线教育实践活动总结大会新闻稿

2014/10/21 职场文书

师德承诺书

2015/01/20 职场文书

2015年控辍保学工作总结

2015/05/18 职场文书

预备党员考察意见范文

2015/06/01 职场文书

基石观后感

2015/06/12 职场文书

毕业赠语大全

2015/06/23 职场文书

Python爬虫之爬取某文库文档数据

2021/04/21 Python

python实现进度条的多种实现

2021/04/29 Python

Python实现聚类K-means算法详解

2022/07/15 Python