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 相关文章推荐
Jquery操作下拉框(DropDownList)实现取值赋值
Aug 13 Javascript
js闭包的用途详解
Nov 09 Javascript
Javascript使用post方法提交数据实例
Aug 03 Javascript
js点击文本框弹出可选择的checkbox复选框
Feb 03 Javascript
Bootstrap每天必学之折叠(Collapse)插件
Apr 25 Javascript
VUEJS实战之修复错误并且美化时间(2)
Jun 13 Javascript
在JS中a标签加入单击事件屏蔽href跳转页面
Dec 16 Javascript
jQuery弹出窗口打开链接的实现代码
Dec 24 Javascript
详解本地Node.js服务器作为api服务器的解决办法
Feb 28 Javascript
JS实现新建文件夹功能
Jun 17 Javascript
babel之配置文件.babelrc入门详解
Feb 22 Javascript
利用webpack理解CommonJS和ES Modules的差异区别
Jun 16 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
JS 网站性能优化笔记
2011/05/24 PHP
PHP函数extension_loaded()用法实例
2015/01/19 PHP
微信支付扫码支付php版
2016/07/22 PHP
9个JavaScript评级/投票插件
2010/01/18 Javascript
js 程序执行与顺序实现详解
2013/05/13 Javascript
js定时器(执行一次、重复执行)
2014/03/07 Javascript
什么是MEAN?JavaScript编程中的MEAN是什么意思?
2014/12/18 Javascript
JQuery中DOM事件合成用法实例分析
2015/06/13 Javascript
JS实现可直接显示网页代码运行效果的HTML代码预览功能实例
2015/08/06 Javascript
AngularJS入门教程之模块化操作用法示例
2016/11/02 Javascript
AngularJS页面传参的5种方式
2017/04/01 Javascript
React入门教程之Hello World以及环境搭建详解
2017/07/11 Javascript
JS简单实现数组去重的方法分析
2017/10/14 Javascript
vue组件父子间通信之综合练习(聊天室)
2017/11/07 Javascript
深入浅析Vue.js 中的 v-for 列表渲染指令
2018/11/19 Javascript
vue spa应用中的路由缓存问题与解决方案
2019/05/31 Javascript
layui监听select变化,以及设置radio选中的方法
2019/09/24 Javascript
Vue实现剪切板图片压缩功能
2020/02/04 Javascript
vue-cli3 引入 font-awesome的操作
2020/08/11 Javascript
Python和GO语言实现的消息摘要算法示例
2015/03/10 Python
如何优雅地改进Django中的模板碎片缓存详解
2018/07/04 Python
AmazeUI的JS表单验证框架实战示例分享
2020/08/21 HTML / CSS
美国最受欢迎的度假目的地优惠套餐:BookVIP
2018/09/27 全球购物
Footshop乌克兰:运动鞋的最大选择
2019/12/01 全球购物
亚洲领先的设计购物网站:Pinkoi
2020/11/26 全球购物
网络信息管理员岗位职责
2014/01/05 职场文书
视光学毕业生自荐书范文
2014/02/13 职场文书
总经理的岗位职责
2014/02/23 职场文书
学校2014重阳节活动策划方案
2014/09/16 职场文书
四查四看整改措施
2014/09/19 职场文书
社区环境卫生倡议书
2015/04/29 职场文书
2015秋季开学演讲稿范文
2015/07/16 职场文书
2015年小学实验室工作总结
2015/07/28 职场文书
2016班级元旦联欢会开幕词
2016/03/04 职场文书
2016年“12.3”国际残疾人日活动总结
2016/04/01 职场文书
python代码实现备忘录案例讲解
2021/07/26 Python