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 相关文章推荐
淘宝搜索框效果实现分析
Mar 05 Javascript
javascript学习笔记(三) String 字符串类型介绍
Jun 19 Javascript
php常见的页面跳转方法汇总
Apr 15 Javascript
纯javascript实现的小游戏《Flappy Pig》实例
Jul 27 Javascript
基于JavaScript操作DOM常用的API小结
Dec 01 Javascript
BootStrap文件上传样式超好看【持续更新】
May 10 Javascript
javascript实现复选框全选或反选
Feb 04 Javascript
node 利用进程通信实现Cluster共享内存
Oct 27 Javascript
js实现关闭网页出现是否离开提示
Dec 07 Javascript
Vue 实现拖动滑块验证功能(只有css+js没有后台验证步骤)
Aug 24 Javascript
Mint UI组件库CheckList使用及踩坑总结
Dec 20 Javascript
在Vuex中Mutations修改状态操作
Jul 24 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
比特率,大家看看这个就不用收音机音质去比MP3音质了
2021/03/01 无线电
一次编写,随处运行
2006/10/09 PHP
php session和cookie使用说明
2010/04/07 PHP
深入分析php之面向对象
2013/05/15 PHP
php准确获取文件MIME类型的方法
2015/06/17 PHP
浅析PHP中call user func()函数及如何使用call user func调用自定义函数
2015/11/05 PHP
php生成毫秒时间戳的实例讲解
2017/09/22 PHP
Django中通过定时任务触发页面静态化的处理方式
2018/08/29 PHP
Laravel 6 将新增为指定队列任务设置中间件的功能
2019/08/06 PHP
js tab 选项卡
2009/04/26 Javascript
JS 文件本身编码转换 图文教程
2009/10/12 Javascript
利用jquery的获取JS文件中的字符串内容
2012/02/14 Javascript
js动态设置div的值下例子
2013/10/29 Javascript
Google (Local) Search API的简单使用介绍
2013/11/28 Javascript
jQuery中eq()方法用法实例
2015/01/05 Javascript
php常见的页面跳转方法汇总
2015/04/15 Javascript
JavaScript如何实现在文本框(密码框)输入提示语
2015/12/25 Javascript
nodeJs内存泄漏问题详解
2016/09/05 NodeJs
JavaScript操作文件_动力节点Java学院整理
2017/06/30 Javascript
JS实现动态生成html table表格的方法分析
2018/07/11 Javascript
详解Vue源码之数据的代理访问
2018/12/11 Javascript
layui数据表格跨行自动合并的例子
2019/09/02 Javascript
Python连接mssql数据库编码问题解决方法
2015/01/01 Python
jupyter 实现notebook中显示完整的行和列
2020/04/09 Python
Pandas将列表(List)转换为数据框(Dataframe)
2020/04/24 Python
基于python实现百度语音识别和图灵对话
2020/11/02 Python
CSS3实现超酷的黑猫警长首页
2016/04/26 HTML / CSS
HTML5 层的叠加的实现
2020/07/07 HTML / CSS
经济学人订阅:The Economist
2018/07/19 全球购物
Funko官方商店:源自美国,畅销全球搪胶收藏玩偶
2018/09/15 全球购物
NYX Professional Makeup俄罗斯官网:世界知名的化妆品品牌
2019/12/26 全球购物
启动仪式策划方案
2014/06/14 职场文书
2014年保险业务员工作总结
2014/12/23 职场文书
工作能力自我评价2015
2015/03/05 职场文书
幼儿园心得体会范文
2016/01/21 职场文书
2016年小学感恩节活动总结
2016/04/01 职场文书