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 相关文章推荐
js动态为代码着色显示行号
May 29 Javascript
ExtJS4中的requires使用方法示例介绍
Dec 03 Javascript
JavaScript显示当前文档最后修改日期的方法
Mar 19 Javascript
Jquery效果大全之制作电脑健康体检得分特效附源码下载
Nov 02 Javascript
详解JavaScript for循环中发送AJAX请求问题
Jun 23 Javascript
jQuery实现的纵向下拉菜单实例详解【附demo源码下载】
Jul 09 Javascript
最丑的时钟效果!js canvas时钟制作方法
Aug 15 Javascript
JS实现页面中所有img对象添加onclick事件及新窗口查看图片的方法
Dec 27 Javascript
JavaScript获取当前时间向前推三个月的方法示例
Feb 04 Javascript
完美实现js焦点轮播效果(二)(图片可滚动)
Mar 07 Javascript
Angular 4 指令快速入门教程
Jun 07 Javascript
Async Validator 异步验证使用说明
Jul 03 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
连接到txt文本的超链接,不直接打开而是点击后下载的处理方法
2009/07/01 PHP
php通过字符串调用函数示例
2014/03/02 PHP
PHP动态输出JavaScript代码实例
2015/02/12 PHP
php file_get_contents取文件中数组元素的方法
2017/04/01 PHP
JavaScript高级程序设计 阅读笔记(七) ECMAScript中的语句
2012/02/27 Javascript
不使用XMLHttpRequest实现异步加载 Iframe和script
2012/10/29 Javascript
JavaScript执行顺序详细介绍
2013/12/04 Javascript
浅析jquery ajax异步调用方法中不能给全局变量赋值的原因及解决方法
2014/01/10 Javascript
jquery提交form表单时禁止重复提交的方法
2014/02/13 Javascript
百度地图自定义控件分享
2015/03/04 Javascript
Javascript获取数组中的最大值和最小值的方法汇总
2016/01/01 Javascript
解析jQueryEasyUI的使用
2016/11/22 Javascript
Node.js使用gm拼装sprite图片
2017/07/04 Javascript
详解使用React进行组件库开发
2018/02/06 Javascript
vue 登录滑动验证实现代码
2018/08/24 Javascript
nodejs遍历文件夹下并操作HTML/CSS/JS/PNG/JPG的方法
2018/11/01 NodeJs
JS数组求和的常用方法总结【5种方法】
2019/01/14 Javascript
实例介绍JavaScript中多种组合继承
2019/01/20 Javascript
Vue.js特性Scoped Slots的浅析
2019/02/20 Javascript
用node撸一个监测复联4开售短信提醒的实现代码
2019/04/10 Javascript
Vue脚手架编写试卷页面功能
2020/03/17 Javascript
《javascript设计模式》学习笔记三:Javascript面向对象程序设计单例模式原理与实现方法分析
2020/04/07 Javascript
vue-cli+webpack项目打包到服务器后,ttf字体找不到的解决操作
2020/08/28 Javascript
jenkins自动构建发布vue项目的方法步骤
2021/01/04 Vue.js
Python爬虫模拟登录带验证码网站
2016/01/22 Python
python中使用%与.format格式化文本方法解析
2017/12/27 Python
Python实现点阵字体读取与转换的方法
2019/01/29 Python
python同步windows和linux文件
2019/08/29 Python
python中的数组赋值与拷贝的区别详解
2019/11/26 Python
利用Python脚本实现自动刷网课
2020/02/03 Python
python中numpy.empty()函数实例讲解
2021/02/05 Python
css3 按钮样式简单可扩展创建
2013/03/18 HTML / CSS
英文求职信结束语大全
2013/10/26 职场文书
银行职员自我鉴定
2014/04/20 职场文书
2014年小学图书室工作总结
2014/12/09 职场文书
2016年优秀班主任先进事迹材料
2016/02/26 职场文书