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对JSON进行模式匹配(Part 1-设计)
Jul 17 Javascript
js的一些常用方法小结
Jun 29 Javascript
ComboBox 和 DateField 在IE下消失的解决方法
Aug 30 Javascript
javascript的理解及经典案例分析
May 20 Javascript
Node.js测试中的Mock文件系统详解
Nov 21 Javascript
jQuery控制控件文本的长度的操作方法
Dec 05 Javascript
js遍历json的key和value的实例
Jan 22 Javascript
微信小程序 点击控件后选中其它反选实例详解
Feb 21 Javascript
jQuery实现百度登录框的动态切换效果
Apr 21 jQuery
Vue.js添加组件操作示例
Jun 13 Javascript
JavaScript原型对象、构造函数和实例对象功能与用法详解
Aug 04 Javascript
详解TS数字分隔符和更严格的类属性检查
May 06 Javascript
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 file_get_contents函数轻松采集html数据
2010/04/22 PHP
php按百分比生成缩略图的代码分享
2014/05/10 PHP
php把大写命名转换成下划线分割命名
2015/04/27 PHP
PHP单例模式详细介绍
2015/07/01 PHP
PHP实现二叉树的深度优先与广度优先遍历方法
2015/09/28 PHP
PHP构造二叉树算法示例
2017/06/21 PHP
PHP新特性详解之命名空间、性状与生成器
2017/07/18 PHP
Django中的cookie与session操作实例代码
2017/08/17 PHP
PHP+JS实现的实时搜索提示功能
2018/03/13 PHP
PDO::setAttribute讲解
2019/01/29 PHP
javascript 简单高效判断数据类型 系列函数 By shawl.qiu
2007/03/06 Javascript
wap图片滚动特效无css3元素纯js脚本编写
2014/08/22 Javascript
jquery uploadify 在FF下无效的解决办法
2014/09/26 Javascript
jQuery获得包含margin的outerWidth和outerHeight的方法
2015/03/25 Javascript
JS中script标签defer和async属性的区别详解
2016/08/12 Javascript
angular6的响应式表单的实现
2018/10/10 Javascript
layui--js控制switch的切换方法
2019/09/03 Javascript
Python第三方库h5py_读取mat文件并显示值的方法
2019/02/08 Python
Python同步遍历多个列表的示例
2019/02/19 Python
Python和Sublime整合过程图示
2019/12/25 Python
Python爬虫解析网页的4种方式实例及原理解析
2019/12/30 Python
Python运行DLL文件的方法
2020/01/17 Python
HTML5实现移动端弹幕动画效果
2019/08/01 HTML / CSS
美国新兴城市生活方式零售商:VILLA
2017/12/06 全球购物
Zooplus罗马尼亚:宠物食品和配件
2019/11/02 全球购物
怎样比较两个类型为String的字符串
2016/08/17 面试题
英智兴达软件测试笔试题
2016/10/12 面试题
交通专业个人自荐信格式
2013/09/23 职场文书
给民警的表扬信
2014/01/08 职场文书
安全教育实施方案
2014/03/02 职场文书
会计的岗位职责
2014/03/15 职场文书
运输服务质量承诺书
2014/03/27 职场文书
学校开学标语
2014/10/06 职场文书
PySwarms(Python粒子群优化工具包)的使用:GlobalBestPSO例子解析
2021/04/05 Python
SpringBoot集成Redis的思路详解
2021/10/16 Redis
MySQL中优化SQL语句的方法(show status、explain分析服务器状态信息)
2022/04/09 MySQL