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 相关文章推荐
DWR Ext 加载数据
Mar 22 Javascript
Js 随机数产生6位数字
May 13 Javascript
JavaScript为对象原型prototype添加属性的两种方式
Aug 01 Javascript
js中字符替换函数String.replace()使用技巧
Aug 14 Javascript
可编辑下拉框的2种实现方式
Jun 13 Javascript
jqueryUI里拖拽排序示例分析
Feb 26 Javascript
基于JavaScript的操作系统你听说过吗?
Jan 28 Javascript
jQuery的Cookie封装,与PHP交互的简单实现
Oct 05 Javascript
微信小程序 SocketIO 实例讲解
Oct 13 Javascript
Javascript中类式继承和原型式继承的实现方法和区别之处
Apr 25 Javascript
jQuery简单实现对数组去重及排序操作实例
Oct 31 jQuery
vue keep-alive的简单总结
Jan 25 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开启安全模式后禁用的函数集合
2011/06/26 PHP
JS(jQuery)实现聊天接收到消息语言自动提醒功能详解【提示“您有新的消息请注意查收”】
2019/04/16 PHP
PHP+iframe模拟Ajax上传文件功能示例
2019/07/02 PHP
PHP ob缓存以及ob函数原理实例解析
2020/11/13 PHP
一个js实现的所谓的滑动门
2007/05/23 Javascript
javascript 弹出层组件(升级版)
2011/05/12 Javascript
解决Extjs上传图片无法预览的解决方法
2012/03/22 Javascript
JS简单操作select和dropdownlist实例
2014/11/26 Javascript
JavaScript实现输入框(密码框)出现提示语
2016/01/12 Javascript
详解JavaScript的AngularJS框架中的作用域与数据绑定
2016/03/04 Javascript
AngularJS extend用法详解及实例代码
2016/11/15 Javascript
JavaScript给每一个li节点绑定点击事件的实现方法
2016/12/01 Javascript
8 行 Node.js 代码实现代理服务器
2016/12/05 Javascript
angular4模块中给标签添加背景图的实现方法
2017/09/15 Javascript
详解vue-element Tree树形控件填坑路
2019/03/26 Javascript
javascript中可能用得到的全部的排序算法
2020/03/05 Javascript
React冒泡和阻止冒泡的应用详解
2020/08/18 Javascript
[01:46]TI4西雅图DOTA2前线报道 中国选手抱团调时差
2014/07/08 DOTA
机器学习python实战之手写数字识别
2017/11/01 Python
Python3实现的判断回文链表算法示例
2019/03/08 Python
Django框架中间件(Middleware)用法实例分析
2019/05/24 Python
基于h5py的使用及数据封装代码
2019/12/26 Python
python在不同条件下的输入与输出
2020/02/13 Python
Python 实现平台类游戏添加跳跃功能
2020/03/27 Python
python自动化发送邮件实例讲解
2021/01/04 Python
一些Solaris面试题
2013/03/22 面试题
历史学专业大学生找工作的自我评价
2013/10/16 职场文书
高中生自我评语大全
2014/01/19 职场文书
安全生产月活动总结
2014/05/04 职场文书
正风肃纪查摆剖析材料
2014/10/10 职场文书
2015年教师自我评价范文
2015/03/04 职场文书
学风建设主题班会
2015/08/17 职场文书
追悼会答谢词范文
2015/09/29 职场文书
python 如何将两个实数矩阵合并为一个复数矩阵
2021/05/19 Python
总结Python使用过程中的bug
2021/06/18 Python
MySQL 语句执行顺序举例解析
2022/06/05 MySQL