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 相关文章推荐
通过JS自动隐藏手机浏览器的地址栏实现原理与代码
Jan 02 Javascript
js模拟点击以提交表单为例兼容主流浏览器
Nov 29 Javascript
jQuery实现滑动页面固定顶部显示(可根据显示位置消失与替换)
Oct 28 Javascript
jQuery动态添加及删除表单上传元素的方法(附demo源码下载)
Jan 15 Javascript
BootStrap selectpicker
Jun 20 Javascript
Vue.js常用指令汇总(v-if、v-for等)
Nov 03 Javascript
JS控制TreeView的结点选择
Nov 11 Javascript
原生JS实现层叠轮播图
May 17 Javascript
React组件之间的通信的实例代码
Jun 27 Javascript
Javasript设计模式之链式调用详解
Apr 26 Javascript
小程序数据通信方法大全(推荐)
Apr 15 Javascript
微信小程序文章列表功能完整实例
Jun 03 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
消息持续发送的完整例子
2006/10/09 PHP
PHP 存取 MySQL 数据库的一个例子
2006/10/09 PHP
PHP中使用imagick生成PSD文件缩略图教程
2015/01/26 PHP
laravel中的fillable和guarded属性详解
2019/10/23 PHP
静态页面的值传递(三部曲)
2006/09/25 Javascript
Extjs学习笔记之一 初识Extjs之MessageBox
2010/01/07 Javascript
JQuery实现鼠标移动到图片上显示边框效果
2014/01/09 Javascript
使用js实现关闭js弹出层的窗口
2014/02/10 Javascript
jquery 判断滚动条到达了底部和顶端的方法
2014/04/02 Javascript
Node.js模块加载详解
2014/08/16 Javascript
jquery zTree异步加载简单实例讲解
2016/02/25 Javascript
js判断主流浏览器类型和版本号的简单实现代码
2016/05/26 Javascript
js本地图片预览实现代码
2016/10/09 Javascript
整理关于Bootstrap警示框的慕课笔记
2017/03/29 Javascript
socket.io学习教程之深入学习篇(三)
2017/04/29 Javascript
JavaScript定义函数的三种实现方法
2017/09/23 Javascript
使用webpack4编译并压缩ES6代码的方法示例
2019/04/24 Javascript
vue.js 2.*项目环境搭建、运行、打包发布的详细步骤
2019/05/01 Javascript
vue实现路由切换改变title功能
2019/05/28 Javascript
Vue 动态添加路由及生成菜单的方法示例
2019/06/20 Javascript
js 将多个对象合并成一个对象 assign方法的实现
2020/09/24 Javascript
python通过邮件服务器端口发送邮件的方法
2015/04/30 Python
python日志记录模块实例及改进
2017/02/12 Python
儿童python练习实例
2018/05/27 Python
PyTorch加载预训练模型实例(pretrained)
2020/01/17 Python
Python用5行代码实现批量抠图的示例代码
2020/04/14 Python
手把手教你从PyCharm安装到激活(最新激活码),亲测有效可激活至2089年
2020/11/25 Python
CSS3中的content属性使用示例
2015/07/20 HTML / CSS
Opodo意大利:欧洲市场上领先的在线旅行社
2019/10/24 全球购物
在职人员函授期间自我评价分享
2013/11/08 职场文书
岗位廉洁从业承诺书
2014/03/28 职场文书
团委竞选演讲稿
2014/04/24 职场文书
2014年作风建设工作总结
2014/10/29 职场文书
同学会邀请函模板
2015/01/30 职场文书
解决pycharm安装scrapy DLL load failed:找不到指定的程序的问题
2021/06/08 Python
详解CSS3.0(Cascading Style Sheet) 层叠级联样式表
2021/07/16 HTML / CSS