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 中字符串连接的性能的一些问题
May 07 Javascript
jQuery中获取Radio元素值的方法
Jul 02 Javascript
JavaScript删除指定子元素代码实例
Jan 13 Javascript
jquery实现未经美化的简洁TAB菜单效果
Aug 28 Javascript
将List对象列表转换成JSON格式的类实现方法
Jul 04 Javascript
纯js实现手风琴效果代码
Apr 17 Javascript
jQuery滚动监听实现商城楼梯式导航效果
Mar 06 Javascript
vue组件实现文字居中对齐的方法
Aug 23 Javascript
[js高手之路]寄生组合式继承的优势详解
Aug 28 Javascript
JS实现的JSON数组去重算法示例
Apr 11 Javascript
三分钟学会用ES7中的Async/Await进行异步编程
Jun 14 Javascript
实现AJAX异步调用和局部刷新的基本步骤
Mar 17 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文章内容分页并生成相应的htm静态页面代码
2010/06/07 PHP
php 模拟get_headers函数的代码示例
2013/04/27 PHP
php探针不显示内存解决方法
2019/09/17 PHP
jquery select多选框的左右移动 具体实现代码
2013/07/03 Javascript
js正则表达式的使用详解
2013/07/09 Javascript
一个JavaScript处理textarea中的字符成每一行实例
2014/09/22 Javascript
简单谈谈javascript中this的隐式绑定
2016/02/22 Javascript
BootStrap中Tab页签切换实例代码
2016/05/30 Javascript
利用Node.js+Koa框架实现前后端交互的方法
2017/02/27 Javascript
vue.js开发环境搭建教程
2017/05/04 Javascript
vue.js 左侧二级菜单显示与隐藏切换的实例代码
2017/05/23 Javascript
knockoutjs模板实现树形结构列表
2017/07/31 Javascript
vue2.0 根据状态值进行样式的改变展示方法
2018/03/13 Javascript
vue 指令之气泡提示效果的实现代码
2018/10/18 Javascript
在js代码拼接dom对象到页面上的模板总结
2018/10/21 Javascript
Javascript迭代、递推、穷举、递归常用算法实例讲解
2019/02/01 Javascript
Node.js使用MongoDB的ObjectId作为查询条件的方法
2019/09/10 Javascript
详解如何在vue+element-ui的项目中封装dialog组件
2020/12/11 Vue.js
[48:56]2018DOTA2亚洲邀请赛 3.31 小组赛 A组 VG vs KG
2018/03/31 DOTA
[50:02]完美世界DOTA2联赛循环赛 Magma vs IO BO2第一场 11.01
2020/11/02 DOTA
Python运行的17个时新手常见错误小结
2012/08/07 Python
python素数筛选法浅析
2018/03/19 Python
Python列表切片常用操作实例解析
2019/12/16 Python
tensorflow自定义激活函数实例
2020/02/04 Python
Python动态导入模块和反射机制详解
2020/02/18 Python
全网最细 Python 格式化输出用法讲解(推荐)
2021/01/18 Python
翻新二手苹果产品的网络领导者:Mac of all Trades
2017/12/19 全球购物
Bose英国官方网站:美国知名音响品牌
2020/01/26 全球购物
学历公证委托书
2014/04/09 职场文书
校园活动策划方案
2014/06/13 职场文书
幼儿园家长安全责任书
2014/07/22 职场文书
教师作风整改措施思想汇报
2014/10/12 职场文书
公司开会通知
2015/04/20 职场文书
结婚幸福感言
2015/08/01 职场文书
《小摄影师》教学反思
2016/02/18 职场文书