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之ESC(第二类混淆)
May 06 Javascript
firefox下对ajax的onreadystatechange的支持情况分析
Dec 14 Javascript
jQuery实现区域打印功能代码详解
Jun 17 Javascript
利用Chrome DevTools直接调试Node.js和JavaScript的方法详解(并行)
Feb 16 Javascript
angular.js指令中transclude选项及ng-transclude指令详解
May 24 Javascript
Javascript继承机制详解
May 30 Javascript
vue文件树组件使用详解
Mar 29 Javascript
JS/HTML5游戏常用算法之碰撞检测 包围盒检测算法详解【圆形情况】
Dec 13 Javascript
深入学习Vue nextTick的用法及原理
Oct 08 Javascript
layui实现数据表格自定义数据项
Oct 26 Javascript
微信小程序组件生命周期的踩坑记录
Mar 03 Javascript
vue实现可以快进后退的跑马灯组件
Apr 08 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 备份数据库代码(生成word,excel,json,xml,sql)
2013/06/23 PHP
PHP准确取得服务器IP地址的方法
2015/06/02 PHP
JavaScript 自动完成脚本整理(33个)
2009/10/20 Javascript
腾讯的ip接口 方便获取当前用户的ip地理位置
2010/11/25 Javascript
jQuery函数的等价原生函数代码示例
2013/05/27 Javascript
jquery表单验证框架提供的身份证验证方法(示例代码)
2013/12/27 Javascript
教你在heroku云平台上部署Node.js应用
2014/07/30 Javascript
arcgis for js 修改infowindow样式的方法
2016/11/02 Javascript
基于jQuery Easyui实现登陆框界面
2017/07/10 jQuery
Vue Cli与BootStrap结合实现表格分页功能
2017/08/18 Javascript
用vue构建多页面应用的示例代码
2017/09/20 Javascript
详解react服务端渲染(同构)的方法
2017/09/21 Javascript
Vue 中批量下载文件并打包的示例代码
2017/11/20 Javascript
vue中eventbus被多次触发以及踩过的坑
2017/12/02 Javascript
20行JS代码实现粘贴板复制功能
2018/02/06 Javascript
Vue 实现双向绑定的四种方法
2018/03/16 Javascript
JS实现的杨辉三角【帕斯卡三角形】算法示例
2019/02/26 Javascript
详解vuex数据传输的两种方式及this.$store undefined的解决办法
2019/08/26 Javascript
layui 阻止图片上传的实例(before方法)
2019/09/26 Javascript
JavaScript实现栈结构Stack过程详解
2020/03/07 Javascript
axios封装与传参示例详解
2020/10/18 Javascript
vue3+typescript实现图片懒加载插件
2020/10/26 Javascript
[01:33:14]LGD vs VP Supermajor 败者组决赛 BO3 第二场 6.10
2018/07/04 DOTA
[01:15:16]DOTA2-DPC中国联赛 正赛 Elephant vs Aster BO3 第一场 1月26日
2021/03/11 DOTA
Python使用shelve模块实现简单数据存储的方法
2015/05/20 Python
关于PyTorch源码解读之torchvision.models
2019/08/17 Python
pytorch在fintune时将sequential中的层输出方法,以vgg为例
2019/08/20 Python
如何基于python把文字图片写入word文档
2020/07/31 Python
CSS3不透明度实例讲解
2016/04/26 HTML / CSS
NFL欧洲商店(德国):NFL Europe Shop DE
2018/11/03 全球购物
三孔导游词
2015/02/05 职场文书
公务员年度考核登记表个人总结
2015/02/12 职场文书
家长高考寄语
2015/02/27 职场文书
酒店前台接待岗位职责
2015/04/02 职场文书
装修公司工程部经理岗位职责
2015/04/09 职场文书
MySQL千万级数据表的优化实战记录
2021/08/04 MySQL