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程序设计有所帮助。

Javascript 相关文章推荐
跟我一起学写jQuery插件开发方法(附完整实例及下载)
Apr 01 Javascript
JQEasy-ui在IE9以下版本中二次加载的问题分析及处理方法
Jun 23 Javascript
JavaScript中的值类型详细介绍
Dec 29 Javascript
浅谈JavaScript中的作用域和闭包问题
Jul 07 Javascript
artDialog+plupload实现多文件上传
Jul 19 Javascript
easyui取消表单实时验证,提交时统一验证的简单实例
Nov 07 Javascript
wap手机端解决返回上一页的js实例
Dec 08 Javascript
AngularJS ui-router (嵌套路由)实例
Mar 10 Javascript
ES6入门教程之let和const命令详解
May 17 Javascript
JS在Array数组中按指定位置删除或添加元素对象方法示例
Nov 19 Javascript
React 实现车牌键盘的示例代码
Dec 20 Javascript
如何使用JavaScript策略模式校验表单
Apr 29 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
Amazon Prime Video平台《无限住人 -IMMORTAL-》2020年开始TV放送!
2020/03/06 日漫
ThinkPHP使用Smarty第三方插件方法小结
2016/03/19 PHP
记录几个javascript有关的小细节
2007/04/02 Javascript
比较全的JS checkbox全选、取消全选、删除功能代码
2008/12/19 Javascript
JScript分割字符串示例代码
2013/09/04 Javascript
input输入框鼠标焦点提示信息
2015/03/17 Javascript
drag-and-drop实现图片浏览器预览
2015/08/06 Javascript
基于javascript如何传递特殊字符
2015/11/30 Javascript
js关于getImageData跨域问题的解决方法
2016/10/14 Javascript
jQuery中checkbox反复调用attr('checked', true/false)只有第一次生效的解决方法
2016/11/16 Javascript
bootstrap IE8 兼容性处理
2017/03/22 Javascript
jQuery实现checkbox即点即改批量删除及中间遇到的坑
2017/11/11 jQuery
express+mockjs实现模拟后台数据发送功能
2018/01/07 Javascript
bootstrap 弹出框modal添加垂直方向滚轴效果
2018/07/09 Javascript
JS实现匀速与减速缓慢运动的动画效果封装示例
2018/08/27 Javascript
jQuery实现鼠标滑动切换图片
2020/05/27 jQuery
[43:43]完美世界DOTA2联赛PWL S2 FTD.C vs Rebirth 第一场 11.22
2020/11/24 DOTA
利用python实现简单的循环购物车功能示例代码
2017/07/05 Python
NumPy 如何生成多维数组的方法
2018/02/05 Python
python删除本地夹里重复文件的方法
2020/11/19 Python
使用canvas实现黑客帝国数字雨效果
2020/01/02 HTML / CSS
英国高级百货公司:Harvey Nichols
2017/01/29 全球购物
惠普香港官方商店:HP香港
2019/04/30 全球购物
香港百佳网上超级市场:PARKNSHOP.com
2020/06/10 全球购物
什么是反射?如何实现反射?
2016/07/25 面试题
代码中finally中的代码会不会执行
2012/02/06 面试题
通信工程毕业生求职信
2013/11/16 职场文书
法律专业学生的自我评价
2014/02/07 职场文书
党员干部2014全国两会学习心得体会
2014/03/10 职场文书
工业自动化专业自荐信范文
2014/04/10 职场文书
业务员工作态度散漫检讨书
2014/11/02 职场文书
2015年世界环境日演讲稿
2015/03/18 职场文书
商场收银员岗位职责
2015/04/07 职场文书
婚宴新郎致辞
2015/07/28 职场文书
Python3使用Qt5来实现简易的五子棋小游戏
2022/05/02 Python
处理canvas绘制图片模糊问题
2022/05/11 Javascript