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 相关文章推荐
9个JavaScript评级/投票插件
Jan 18 Javascript
拉动滚动条加载数据的jquery代码
May 03 Javascript
javascript函数以及基础写法100多条实用整理
Jan 13 Javascript
基于jquery实现的仿优酷图片轮播特效代码
Jan 13 Javascript
javaScript生成支持中文带logo的二维码(jquery.qrcode.js)
Jan 03 Javascript
微信小程序 详解下拉加载与上拉刷新实现方法
Jan 13 Javascript
JavaScript中Array方法你该知道的正确打开方法
Sep 11 Javascript
使用JavaScript解析URL的方法示例
Mar 01 Javascript
监听element-ui table滚动事件的方法
Mar 26 Javascript
解决vue scoped scss 无效的问题
Sep 04 Javascript
在vue中通过render函数给子组件设置ref操作
Nov 17 Vue.js
vue路由实现登录拦截
Mar 24 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
You might like
php 时间计算问题小结
2009/01/04 PHP
PHP5与MySQL数据库操作常用代码 收集
2010/03/21 PHP
PHP运行时强制显示出错信息的代码
2011/04/20 PHP
浅谈PHP正则表达式中修饰符/i, /is, /s, /isU
2014/10/21 PHP
ThinkPHP中session函数详解
2016/09/14 PHP
ThinkPHP实现生成和校验验证码功能
2017/04/28 PHP
Thinkphp极验滑动验证码实现步骤解析
2020/11/24 PHP
js jq 单击和双击区分示例介绍
2013/11/05 Javascript
jquery序列化方法实例分析
2015/06/10 Javascript
JS实现数字格式千分位相互转换方法
2016/08/01 Javascript
javascript函数中的3个高级技巧
2016/09/22 Javascript
vue.js2.0 实现better-scroll的滚动效果实例详解
2018/08/13 Javascript
微信小程序用户位置权限的获取方法(拒绝后提醒)
2018/11/15 Javascript
vue实现搜索功能
2019/05/28 Javascript
vue 实现滚动到底部翻页效果(pc端)
2019/07/31 Javascript
微信公众号平台接口开发 获取微信服务器IP地址方法解析
2019/08/14 Javascript
vue el-table实现行内编辑功能
2019/12/11 Javascript
Vue实现简单的留言板
2020/10/23 Javascript
一键搞定python连接mysql驱动有关问题(windows版本)
2016/04/23 Python
利用python模拟sql语句对员工表格进行增删改查
2017/07/05 Python
Pycharm以root权限运行脚本的方法
2019/01/19 Python
python3人脸识别的两种方法
2019/04/25 Python
python 多线程对post请求服务器测试并发的方法
2019/06/13 Python
Python3之不使用第三方变量,实现交换两个变量的值
2019/06/26 Python
关于 Python opencv 使用中的 ValueError: too many values to unpack
2019/06/28 Python
python psutil监控进程实例
2019/12/17 Python
pytorch之inception_v3的实现案例
2020/01/06 Python
python中如何打包用户自定义模块
2020/09/23 Python
Html5中localStorage存储JSON数据并读取JSON数据的实现方法
2017/02/13 HTML / CSS
手机配件第一品牌:ZAGG
2017/05/28 全球购物
亚马逊海外购:亚马逊美国、英国、日本、德国直邮
2021/03/18 全球购物
如何将字串String转换成整数int
2015/02/21 面试题
宿舍保安职务说明书
2014/02/25 职场文书
党课培训心得体会
2014/09/02 职场文书
怎样写辞职信
2015/02/27 职场文书
Python 绘制多因子柱状图
2022/05/11 Python