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 相关文章推荐
『jQuery』.html(),.text()和.val()的概述及使用
Apr 22 Javascript
解决jquery操作checkbox火狐下第二次无法勾选问题
Feb 10 Javascript
javascript日期格式化示例分享
Mar 05 Javascript
JavaScript使表单中的内容显示在屏幕上的方法
Jun 29 Javascript
JS数组合并push与concat区别分析
Dec 17 Javascript
深入浅析JSON.parse()、JSON.stringify()和eval()的作用详解
Apr 03 Javascript
ionic js 复选框 与普通的 HTML 复选框到底有没区别
Jun 06 Javascript
通过正则表达式获取url中参数的简单实现
Jun 07 Javascript
使用JQ完成表格隔行换色的简单实例
Aug 25 Javascript
Vue微信项目按需授权登录策略实践思路详解
May 07 Javascript
微信小程序开发之点击按钮退出小程序的实现方法
Apr 26 Javascript
9种方法优化jQuery代码详解
Feb 04 jQuery
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
第1次亲密接触PHP5(2)
2006/10/09 PHP
mysql 中InnoDB和MyISAM的区别分析小结
2008/04/15 PHP
利用ThinkPHP内置的ThinkAjax实现异步传输技术的实现方法
2011/12/19 PHP
php生成扇形比例图实例
2013/11/06 PHP
thinkPHP线上自动加载异常与修复方法实例分析
2016/12/01 PHP
php curl获取https页面内容,不直接输出返回结果的设置方法
2019/01/15 PHP
laravel框架上传图片实现实时预览功能
2019/10/14 PHP
JavaScript静态的动态
2006/09/18 Javascript
自己的js工具 Cookie 封装
2009/08/21 Javascript
js几个验证函数代码
2010/03/25 Javascript
HTML颜色选择器实现代码
2010/11/23 Javascript
js中查找最近的共有祖先元素的实现代码
2010/12/30 Javascript
js使用eval解析json实例与注意事项分享
2014/01/18 Javascript
利用jQuery实现WordPress中@的ID悬浮显示评论内容
2015/12/11 Javascript
BootStrap的Datepicker控件使用心得分享
2016/05/25 Javascript
分享javascript实现的冒泡排序代码并优化
2016/06/05 Javascript
javascript中mouseenter与mouseover的异同
2017/06/06 Javascript
微信小程序实现下拉框功能
2019/07/16 Javascript
jQuery使用ajax传递json对象到服务端及contentType的用法示例
2020/03/12 jQuery
JS中准确判断变量类型的方法
2020/06/01 Javascript
vue的webcamjs集成方式
2020/11/16 Javascript
JavaScript canvas实现雨滴特效
2021/01/10 Javascript
python在不同层级目录import模块的方法
2016/01/31 Python
Python 多核并行计算的示例代码
2017/11/07 Python
小米5s微信跳一跳小程序python源码
2018/01/08 Python
python保存二维数组到txt文件中的方法
2018/11/15 Python
Python Django 实现简单注册功能过程详解
2019/07/29 Python
python 利用jinja2模板生成html代码实例
2019/10/10 Python
pytorch 实现在预训练模型的 input上增减通道
2020/01/06 Python
Python pyautogui模块实现鼠标键盘自动化方法详解
2020/02/17 Python
利用Python脚本批量生成SQL语句
2020/03/04 Python
python pandas利用fillna方法实现部分自动填充功能
2020/03/16 Python
意大利奢侈品多品牌集合店:TheDoubleF
2019/08/24 全球购物
优秀大学生自荐信
2014/06/09 职场文书
学雷锋志愿者活动总结
2014/06/27 职场文书
2014年人民调解工作总结
2014/12/08 职场文书