javascript事件冒泡实例分析


Posted in Javascript onMay 13, 2015

本文实例讲述了javascript事件冒泡。分享给大家供大家参考。具体分析如下:

事件冒泡:
 
如果元素A嵌套在元素B中,那么A被点击不仅A的onclick事件会被触发,B的onclick也会被触发,

触发的顺序是"由内而外".验证:在页面上添加一个table,table里有tr,tr里有td,td里放一个p,

在p,td,tr,table中添加事件响应

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>事件冒泡</title>
</head>
<body onclick="alert('body click');">
  <table onclick="alert('table click');">
    <tr onclick="alert('tr click');">
      <td onclick="alert('td click');">
        <input type="button" value="单击我" 
        onclick="alert('button click');" />
      </td>
    </tr>
  </table>
</body>
</html>

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

Javascript 相关文章推荐
javascript或asp实现的判断身份证号码是否正确两种验证方法
Nov 26 Javascript
jQuery对象和DOM对象的相互转化实现代码
Mar 02 Javascript
js实现的下拉框二级联动效果
Apr 30 Javascript
jQuery Easyui Datagrid实现单行的上移下移及保存移动的结果
Aug 15 Javascript
详解Jquery的事件操作和文档操作
Dec 19 Javascript
Bootstrap3 模态框使用实例
Feb 22 Javascript
Vue和Bootstrap的整合思路详解
Jun 30 Javascript
如何使用less实现随机下雪动画详解
Jan 02 Javascript
Vue实现table上下移动功能示例
Feb 21 Javascript
微信小程序渲染性能调优小结
Jul 30 Javascript
JavaScript canvas绘制折线图
Feb 18 Javascript
如何正确解决VuePress本地访问出现资源报错404的问题
Dec 03 Vue.js
javascript无刷新评论实现方法
May 13 #Javascript
javascript动态创建表格及添加数据实例详解
May 13 #Javascript
javascript动态创建链接的方法
May 13 #Javascript
javascript中innerText和innerHTML属性用法实例分析
May 13 #Javascript
javascript元素动态创建实现方法
May 13 #Javascript
javascript实现模拟时钟的方法
May 13 #Javascript
javascript实现点击后变换按钮显示文字的方法
May 13 #Javascript
You might like
php设计模式 Chain Of Responsibility (职责链模式)
2011/06/26 PHP
PHP FTP操作类代码( 上传、拷贝、移动、删除文件/创建目录)
2014/05/10 PHP
YII Framework框架教程之安全方案详解
2016/03/14 PHP
PHP命名空间和自动加载类
2016/04/03 PHP
源码分析 Laravel 重复执行同一个队列任务的原因
2017/12/25 PHP
PHP实现微信提现功能
2018/09/30 PHP
PHP应用跨时区功能的实现方法
2019/03/21 PHP
ExtJS Grid使用SimpleStore、多选框的方法
2009/11/20 Javascript
jQuery的each终止或跳过示例代码
2013/12/12 Javascript
关于JS数组追加数组采用push.apply的问题
2014/06/09 Javascript
对JavaScript的全文搜索实现相关度评分的功能的方法
2015/06/24 Javascript
DEDECMS如何为文章添加HOT NEW标志图片
2015/08/14 Javascript
jquery淡入淡出效果简单实例
2016/01/14 Javascript
JS实现点击网页判断是否安装app并打开否则跳转app store
2016/11/18 Javascript
vue-cli之router基本使用方法详解
2017/10/17 Javascript
解析Vue 2.5的Diff算法
2017/11/28 Javascript
在 Angular中 使用 Lodash 的方法
2018/02/11 Javascript
vue组件之间的数据传递方法详解
2019/04/19 Javascript
vue实现滑动切换效果(仅在手机模式下可用)
2020/06/29 Javascript
Webpack设置环境变量的一些误区详解
2019/12/19 Javascript
[00:43]FTP典藏礼包 DOTA2三大英雄霸气新套装
2014/03/21 DOTA
Python学习笔记之变量、自定义函数用法示例
2019/05/28 Python
Python : turtle色彩控制实例详解
2020/01/19 Python
详解Python中pyautogui库的最全使用方法
2020/04/01 Python
欧洲最大的婴幼儿服装及内衣公司:Petit Bateau(小帆船)
2016/08/16 全球购物
洛杉矶健身中心女性专用运动服饰品牌:Marika
2018/05/09 全球购物
Gtech官方网站:地毯清洁器、吸尘器及园艺设备
2018/05/23 全球购物
小学生新学期寄语
2014/01/19 职场文书
《守株待兔》教学反思
2014/03/01 职场文书
超市促销活动方案
2014/03/05 职场文书
俞敏洪北大演讲稿
2014/05/22 职场文书
小学生我的梦想演讲稿
2014/08/21 职场文书
乡村教师党员四风问题对照检查材料思想汇报
2014/10/08 职场文书
青年岗位能手事迹材料(2016推荐版)
2016/03/01 职场文书
优秀大学生申请书
2019/06/24 职场文书
python 实现图片特效处理
2022/04/03 Python