JS html事件冒泡和事件捕获操作示例


Posted in Javascript onMay 01, 2019

本文实例讲述了JS html事件冒泡和事件捕获操作。分享给大家供大家参考,具体如下:

今天学习了事件冒泡和捕获,记录一下。

1.冒泡型事件:事件按照从最特定的事件目标到最不特定的事件目标(document对象)的顺序触发。

我一般用法就是理解为触发事件A, 会触发A的父亲,爷爷,爷爷的父亲......

代码:

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>点击事件捕获冒泡实验</title>
</head>
<body>
<div id="grandPa">
  <div id="father">
    <div id="son">
      <input type="button" value="click"/>
    </div>
  </div>
</div>
<script type="text/javascript">
  var father = document.getElementById('father');
  father.addEventListener('click',function () {
    alert('fattther');
  })
  var son = document.getElementById('son');
  son.addEventListener('click',function () {
    alert('son');
  });
</script>
</body>
</html>

点击button,会以此弹出"son", "father"。

2.捕获事件:使用事件捕获时,父级元素先触发,子级元素后触发。

我们使用addEventListener添加监听事件时,参数分别为(事件类型, function(){}, capture), 一般不写第三个参数时默认为false,即事件冒泡。

所以1中的代码会是事件冒泡顺序。如果我们想改为事件捕获,把参数设置为true即可,代码如下:

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>点击事件捕获冒泡实验</title>
</head>
<body>
<div id="container">
  <div id="father">
    <div id="son">
      <input type="button" value="click"/>
    </div>
  </div>
</div>
<script type="text/javascript">
  var father = document.getElementById('father');
  father.addEventListener('click',function () {
    alert('fattther');
  },true)
  var son = document.getElementById('son');
  son.addEventListener('click',function () {
    alert('son');
  });
</script>
</body>
</html>

这样当你点击button后就会以此弹出"father",  "son"了。

感兴趣的朋友可以使用在线HTML/CSS/JavaScript代码运行工具http://tools.3water.com/code/HtmlJsRun测试上述代码运行效果。

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

Javascript 相关文章推荐
根据分辩率调用不同的CSS.
Jan 08 Javascript
ModelDialog JavaScript模态对话框类代码
Apr 17 Javascript
javascript实现Email邮件显示与删除功能
Nov 21 Javascript
如何用js实现鼠标向上滚动时浮动导航
Jul 18 Javascript
textarea 在浏览器中固定大小和禁止拖动的实现方法
Dec 03 Javascript
微信小程序开发之大转盘 仿天猫超市抽奖实例
Dec 08 Javascript
详解微信小程序——自定义圆形进度条
Dec 29 Javascript
javascript内存分配原理实例分析
Apr 10 Javascript
Angularjs2不同组件间的通信实例代码
May 06 Javascript
微信小程序自定义tabBar组件开发详解
Sep 24 Javascript
JavaScript前端开发时数值运算的小技巧
Jul 28 Javascript
Vue中 axios delete请求参数操作
Aug 25 Javascript
JS实现的贪吃蛇游戏案例详解
May 01 #Javascript
javascript原型链学习记录之继承实现方式分析
May 01 #Javascript
微信小程序实现卡片左右滑动效果的示例代码
May 01 #Javascript
微信小程序常见页面跳转操作简单示例
May 01 #Javascript
浅谈对于react-thunk中间件的简单理解
May 01 #Javascript
vue增加强缓存和版本号的实现方法
May 01 #Javascript
vue组件化中slot的基本使用方法
May 01 #Javascript
You might like
php自动注册登录验证机制实现代码
2011/12/20 PHP
PHP+ajaxfileupload+jcrop插件完美实现头像上传剪裁
2014/06/09 PHP
用javascript获得地址栏参数的两种方法
2006/11/08 Javascript
js下写一个事件队列操作函数
2010/07/19 Javascript
JS中typeof与instanceof之间的区别总结
2013/11/14 Javascript
JS获得浏览器版本和操作系统版本的例子
2014/05/13 Javascript
javascript 中that的含义示例介绍
2014/05/14 Javascript
PHP使用方法重载实现动态创建属性的get和set方法
2014/11/17 Javascript
Jquery使用小技巧汇总
2015/12/29 Javascript
基于jQuery实现Ajax验证用户名是否存在实例
2016/03/30 Javascript
jQuery select自动选中功能实现方法分析
2016/11/28 Javascript
JS基于对象的特性实现去除数组中重复项功能详解
2017/11/17 Javascript
js传递数组参数到后台controller的方法
2018/03/29 Javascript
微信小程序实现城市列表选择
2018/06/05 Javascript
vue打包之后生成一个配置文件修改接口的方法
2018/12/09 Javascript
使用Node.js写一个代码生成器的方法步骤
2019/05/10 Javascript
Vue-cli打包后如何本地查看的操作
2020/09/02 Javascript
[06:49]2018DOTA2国际邀请赛寻真——VirtusPro傲视群雄
2018/08/12 DOTA
python批量查询、汉字去重处理CSV文件
2018/05/31 Python
Python自定义一个异常类的方法
2019/06/27 Python
python使用requests.session模拟登录
2019/08/09 Python
Python统计分析模块statistics用法示例
2019/09/06 Python
pytorch加载自己的图像数据集实例
2020/07/07 Python
canvas实现扭蛋机动画效果的示例代码
2018/10/17 HTML / CSS
里程积分管理买卖交换平台:Points.com
2017/01/13 全球购物
Argos官网:英国家喻户晓的百货零售连锁商
2017/04/03 全球购物
什么是唯一索引
2015/07/05 面试题
如何清空Session
2015/02/23 面试题
取保候审保证书
2014/04/30 职场文书
反腐倡廉标语
2014/06/24 职场文书
护士2014年终工作总结
2014/11/11 职场文书
难以忽视的真相观后感
2015/06/05 职场文书
2016年秋季运动会广播稿
2015/12/21 职场文书
交互式可视化js库gojs使用介绍及技巧
2022/02/18 Javascript
MySQL库表太大怎么办? 数据库分库分表项目实践
2022/04/11 MySQL
SpringBoot详解执行过程
2022/07/15 Java/Android