首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 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 相关文章推荐
相册展示PhotoSwipe.js插件实现
Aug 25 Javascript
JavaScript类的写法
Sep 17 Javascript
jQuery ajaxForm()的应用
Oct 14 Javascript
JQuery获取鼠标进入和离开容器的方向
Dec 29 Javascript
微信小程序侧边栏滑动特效(左右滑动)
Jan 23 Javascript
Vue2.0用 watch 观察 prop 变化(不触发)
Sep 08 Javascript
Vue中封装input组件的实例详解
Oct 17 Javascript
Vue实战之vue登录验证的实现代码
Oct 31 Javascript
vue源码学习之Object.defineProperty 对数组监听
May 30 Javascript
Vue CLI3 如何支持less的方法示例
Aug 29 Javascript
详解JavaScript类型判断的四种方法
Oct 21 Javascript
vue-drawer-layout实现手势滑出菜单栏
Nov 19 Vue.js
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
区块链(2) keeplive_timeout(1) NumPy(2) RTMP(1) 双向链表(6) text-shadow(1) 模拟登录(1) location(2) zabbix(9) TypeScript(2)
You might like
php ob_flush,flush在ie中缓冲无效的解决方法
2010/05/09 PHP
PHP操作文件类的函数代码（文件和文件夹创建，复制，移动和删除）
2011/11/10 PHP
php无限分类且支持输出树状图的详细介绍
2013/06/19 PHP
php中strlen和mb_strlen用法实例分析
2016/11/12 PHP
PHP使用微信开发模式实现搜索已发送图文及匹配关键字回复的方法
2017/09/13 PHP
PHP时间类完整代码实例
2021/02/26 PHP
用jQuery实现检测浏览器及版本的脚本代码
2008/01/22 Javascript
基于jquery的使ListNav兼容中文首字拼音排序的实现代码
2011/07/10 Javascript
dojo学习第二天 ajax异步请求之绑定列表
2011/08/29 Javascript
JavaScript常用脚本汇总（三）
2015/03/04 Javascript
JavaScript高级程序设计（第三版）学习笔记1~5章
2016/03/11 Javascript
jQuery技巧之让任何组件都支持类似DOM的事件管理
2016/04/05 Javascript
JS获取html元素的标记名实现方法
2016/10/08 Javascript
浅析JavaScript的几种Math函数,random(),ceil(),round(),floor()
2016/12/22 Javascript
原生JS实现图片网格式渐显、渐隐效果
2017/06/05 Javascript
360doc网站不登录就无法复制内容的解决方法
2018/01/27 Javascript
微信小程序实现漂亮的弹窗效果
2020/05/26 Javascript
vue使用laydate时间插件的方法
2018/11/14 Javascript
JS造成内存泄漏的几种情况实例分析
2020/03/02 Javascript
Vue+Vuex实现自动登录的知识点详解
2020/03/04 Javascript
[02:20]2014DOTA2西雅图邀请赛 MVP外卡赛首胜采访
2014/07/09 DOTA
Python3解决棋盘覆盖问题的方法示例
2017/12/07 Python
python写一个md5解密器示例
2018/02/23 Python
使用Django2快速开发Web项目的详细步骤
2019/01/06 Python
Python饼状图的绘制实例
2019/01/15 Python
window环境pip切换国内源（pip安装异常缓慢的问题）
2019/12/31 Python
html5 跨文档消息传输示例探讨
2013/04/01 HTML / CSS
意大利和国际奢侈品牌购物网站：Suitnegozi.com
2021/01/15 全球购物
瀑布模型都有哪些优缺点
2014/06/23 面试题
自荐信格式技巧有哪些呢
2013/11/19 职场文书
网络编辑求职信
2014/04/30 职场文书
2015年先进个人自荐书
2015/03/24 职场文书
针对吵架老公保证书
2015/05/08 职场文书
高温慰问简报
2015/07/21 职场文书
Linux中Nginx的防盗链和优化的实现代码
2021/06/20 Servers
mapstruct的用法之qualifiedByName示例详解
2022/04/06 Java/Android