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面向对象之四 继承
Feb 08 Javascript
基于JavaScript 类的使用详解
May 07 Javascript
jsp+javascript打造级连菜单的实例代码
Jun 14 Javascript
jquery结合CSS使用validate实现漂亮的验证
Jan 29 Javascript
javascript编程异常处理实例小结
Nov 30 Javascript
jQuery实现摸拟alert提示框
May 22 Javascript
Extjs 点击复选框在表格中增加相关信息行
Jul 12 Javascript
Easyui ueditor 整合解决不能编辑的问题(推荐)
Jun 25 Javascript
React/Redux应用使用Async/Await的方法
Nov 16 Javascript
JavaScript中Array方法你该知道的正确打开方法
Sep 11 Javascript
微信小程序实现评论功能
Nov 28 Javascript
JS实现在线ps功能详解
Jul 31 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
MYSQL环境变量设置方法
2007/01/15 PHP
PHP 页面编码声明方法详解(header或meta)
2010/03/12 PHP
组合算法的PHP解答方法
2012/02/04 PHP
PHP 抽象方法与抽象类abstract关键字介绍及应用
2014/10/16 PHP
WordPress中注册菜单与调用菜单的方法详解
2015/12/18 PHP
thinkphp ajaxfileupload实现异步上传图片的示例
2017/08/28 PHP
如何重写Laravel异常处理类详解
2020/12/20 PHP
Javascript中的Split使用方法与技巧
2007/03/09 Javascript
jQuery News Ticker 基于jQuery的即时新闻行情展示插件
2011/11/05 Javascript
javascript正则表达式中的replace方法详解
2015/04/20 Javascript
JavaScript数组的定义及数字操作技巧
2016/06/06 Javascript
EasyUI学习之Combobox下拉列表(1)
2016/12/29 Javascript
整理关于Bootstrap表单的慕课笔记
2017/03/29 Javascript
webpack配置sass模块的加载的方法
2017/07/30 Javascript
Windows安装Node.js报错:2503、2502的解决方法
2017/10/25 Javascript
node基于puppeteer模拟登录抓取页面的实现
2018/05/09 Javascript
vue自定义指令的创建和使用方法实例分析
2018/12/04 Javascript
vue 弹窗时 监听手机返回键关闭弹窗功能(页面不跳转)
2019/05/10 Javascript
判断JavaScript中的两个变量是否相等的操作符
2019/12/21 Javascript
Vue 中如何将函数作为 props 传递给组件的实现代码
2020/05/12 Javascript
[01:00]DOTA2 store: Collection of Artisan's Wonders
2015/08/12 DOTA
Python ORM框架SQLAlchemy学习笔记之数据添加和事务回滚介绍
2014/06/10 Python
Python操作MySQL数据库9个实用实例
2015/12/11 Python
Python使用while循环花式打印乘法表
2019/01/28 Python
Python发展史及网络爬虫
2019/06/19 Python
python元组和字典的内建函数实例详解
2019/10/22 Python
matplotlib quiver箭图绘制案例
2020/04/17 Python
没编程基础可以学python吗
2020/06/17 Python
Pandas中两个dataframe的交集和差集的示例代码
2020/12/13 Python
处理HTML5新标签的浏览器兼容版问题
2017/03/13 HTML / CSS
英国在线潜水商店:Simply Scuba
2019/03/25 全球购物
欢迎领导标语
2014/06/27 职场文书
学生上课说话检讨书
2014/10/25 职场文书
学生逃课万能检讨书2000字
2015/02/17 职场文书
选调生挂职锻炼工作总结
2015/10/23 职场文书
创业计划书之网络外卖
2019/10/31 职场文书