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 相关文章推荐
Iframe 自适应高度并实时监控高度变化的js代码
Oct 30 Javascript
Javascript 面向对象(一)(共有方法,私有方法,特权方法)
May 23 Javascript
node.js实现逐行读取文件内容的代码
Jun 27 Javascript
javascript实现状态栏文字首尾相接循环滚动的方法
Jul 22 Javascript
jquery自定义表格样式
Nov 23 Javascript
IOS中safari下的select下拉菜单文字过长不换行的解决方法
Sep 26 Javascript
JS操作xml对象转换为Json对象示例
Mar 25 Javascript
详解vue 模拟后台数据(加载本地json文件)调试
Aug 25 Javascript
JavaScript实现简单生成随机颜色的方法
Sep 21 Javascript
Vue 实现前进刷新后退不刷新的效果
Jun 14 Javascript
javascript获取select值的方法完整实例
Jun 20 Javascript
vue移动端写的拖拽功能示例代码
Sep 09 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小程序自动提交到自助友情连接
2009/11/24 PHP
PHP 防恶意刷新实现代码
2010/05/16 PHP
PHP验证码类代码( 最新修改,完全定制化! )
2010/12/02 PHP
php实现读取手机客户端浏览器的类
2015/01/09 PHP
laravel如何开启跨域功能示例详解
2017/08/31 PHP
JS无法捕获滚动条上的mouse up事件的原因猜想
2012/03/21 Javascript
什么是json和jsonp,jQuery json实例详详细说明
2012/12/11 Javascript
AngularJS进行性能调优的7个建议
2015/12/28 Javascript
轻松实现jquery选项卡切换效果
2016/10/10 Javascript
JavaScript基础——使用Canvas绘图
2016/11/02 Javascript
利用transition实现文字上下抖动的效果
2017/01/21 Javascript
微信小程序  TLS 版本必须大于等于1.2问题解决
2017/02/22 Javascript
详解Vue.js 2.0 如何使用axios
2017/04/21 Javascript
详解Nuxt.js Vue服务端渲染摸索
2018/02/08 Javascript
vue实现点击展开点击收起效果
2018/04/27 Javascript
JavaScript中的垃圾回收与内存泄漏示例详解
2019/05/02 Javascript
Node.js fs模块(文件模块)创建、删除目录(文件)读取写入文件流的方法
2019/09/03 Javascript
vue2.* element tabs tab-pane 动态加载组件操作
2020/07/19 Javascript
研究Python的ORM框架中的SQLAlchemy库的映射关系
2015/04/25 Python
python正则实现计算器功能
2017/12/14 Python
Python冲顶大会 快来答题!
2018/01/17 Python
浅谈Django中的数据库模型类-models.py(一对一的关系)
2018/05/30 Python
PyCharm+PySpark远程调试的环境配置的方法
2018/11/29 Python
完美解决Python matplotlib绘图时汉字显示不正常的问题
2019/01/29 Python
python opencv将图片转为灰度图的方法示例
2019/07/31 Python
CSS3中的@keyframes关键帧动画的选择器绑定
2016/06/13 HTML / CSS
Holiday Inn中国官网:IHG旗下假日酒店预订
2018/04/08 全球购物
Gina Bacconi官网:吉娜贝康尼连衣裙和礼服
2018/04/24 全球购物
如何实现jdbc性能优化
2012/07/30 面试题
班组长岗位职责
2014/03/03 职场文书
读书活动总结
2014/04/28 职场文书
党的群众路线教育实践活动个人承诺书
2014/05/22 职场文书
禁毒宣传标语
2014/06/19 职场文书
镇副书记专题民主生活会对照检查材料思想汇报
2014/10/02 职场文书
python 标准库原理与用法详解之os.path篇
2021/10/24 Python
Windows Server 2012配置DNS服务器的方法
2022/04/29 Servers