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 相关文章推荐
Tab页界面 用jQuery及Ajax技术实现(php后台)
Oct 12 Javascript
鼠标经过显示二级菜单js特效
Aug 13 Javascript
jquery实现手风琴效果
Nov 20 Javascript
jQuery实现带水平滑杆的焦点图动画插件
Mar 08 Javascript
AngularJS基础 ng-selected 指令简单示例
Aug 03 Javascript
vue实现长图垂直居上 vue实现短图垂直居中
Oct 18 Javascript
bootstrap响应式工具使用详解
Nov 29 Javascript
JS从非数组对象转数组的方法小结
Mar 26 Javascript
JQuery常用选择器功能与用法实例分析
Dec 23 jQuery
小程序跨页面交互的作用与方法详解
Jan 07 Javascript
在vue项目中封装echarts的步骤
Dec 25 Vue.js
Vue接口封装的完整步骤记录
May 14 Vue.js
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中用header图片地址 简单隐藏图片源地址
2008/04/09 PHP
百度地图经纬度转换到腾讯地图/Google 对应的经纬度
2015/08/28 PHP
php实现学生管理系统
2020/03/21 PHP
jQuery获取css z-index在各种浏览器中的返回值
2010/09/15 Javascript
再谈javascript图片预加载技术(详细演示)
2011/03/12 Javascript
jquery实现不同大小浏览器使用不同的css样式表的方法
2014/04/02 Javascript
AngularJS的表单使用详解
2015/06/17 Javascript
JavaScript类继承及实例化的方法
2015/07/25 Javascript
自己动手写的jquery分页控件(非常简单实用)
2015/10/28 Javascript
jQuery实现可关闭固定于底(顶)部的工具条菜单效果
2015/11/06 Javascript
微信小程序 教程之小程序配置
2016/10/17 Javascript
Jquery UI实现一次拖拽多个选中的元素操作
2020/12/01 Javascript
关于vue-resource报错450的解决方案
2017/07/24 Javascript
VUE + UEditor 单图片跨域上传功能的实现方法
2018/02/08 Javascript
vue 虚拟dom的patch源码分析
2018/03/01 Javascript
微信小程序自定义导航栏实例代码
2019/04/05 Javascript
JavaScript实现简单的计算器
2020/01/16 Javascript
python 控制语句
2011/11/03 Python
python中使用PIL制作并验证图片验证码
2018/03/15 Python
python的concat等多种用法详解
2018/11/28 Python
Python3.4学习笔记之类型判断,异常处理,终止程序操作小结
2019/03/01 Python
python实现翻转棋游戏(othello)
2019/07/29 Python
Python图像处理之图片文字识别功能(OCR)
2019/07/30 Python
Django项目中实现使用qq第三方登录功能
2019/08/13 Python
Python 模拟动态产生字母验证码图片功能
2019/12/24 Python
HTML5到底会有什么发展?HTML5的前景展望
2015/07/07 HTML / CSS
cosme官方海外旗舰店:日本最大化妆品和美容产品的综合口碑网站
2017/01/18 全球购物
Tretorn美国官网:瑞典外套和鞋类品牌,抵御风雨
2018/07/19 全球购物
Stella McCartney官网:成衣、包袋、香水、内衣、童装及Adidas系列
2018/12/20 全球购物
购房公证委托书(2014版)
2014/09/12 职场文书
雷锋的故事观后感
2015/06/10 职场文书
python 通过使用Yolact训练数据集
2021/04/06 Python
如何用JavaScript学习算法复杂度
2021/04/30 Javascript
36个正则表达式(开发效率提高80%)
2021/11/17 Javascript
浅谈Python中对象是如何被调用的
2022/04/06 Python
Javascript webpack动态import
2022/04/19 Javascript