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插件 cluetip 关键词注释
Jan 12 Javascript
Javascript 面向对象 重载
May 13 Javascript
JavaScript中的闭包(Closure)详细介绍
Dec 30 Javascript
Js与Jq 获取页面元素值的方法和差异对比
Apr 30 Javascript
详解JavaScript跨域总结与解决办法
Oct 31 Javascript
如何用JS/HTML将时间戳转换为“xx天前”的形式
Feb 06 Javascript
jsonp跨域请求实现示例
Mar 13 Javascript
angularjs实现首页轮播图效果
Apr 14 Javascript
js判断传入时间和当前时间大小实例(超简单)
Jan 11 Javascript
php中and 和 &amp;&amp;出坑指南
Jul 13 Javascript
浅谈JS中this在各个场景下的指向
Aug 14 Javascript
JS继承实现方法及优缺点详解
Sep 02 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
php中对xml读取的相关函数的介绍一
2008/06/05 PHP
php压缩HTML函数轻松实现压缩html/js/Css及注意事项
2013/01/27 PHP
探讨PHP中OO之静态关键字以及类常量的详解
2013/06/07 PHP
IE中radio 或checkbox的checked属性初始状态下不能选中显示问题
2009/07/25 Javascript
node+express+jade制作简单网站指南
2014/11/26 Javascript
AngularJs Javascript MVC 框架
2016/06/20 Javascript
详解Javascript数据类型的转换规则
2016/12/12 Javascript
js中的面向对象入门
2017/03/06 Javascript
完美解决UI-Grid表格元素中多个空格显示为一个空格的问题
2017/04/25 Javascript
javascript简写常用的12个技巧(可以大大减少你的js代码量)
2020/03/28 Javascript
JS实现多物体运动的方法详解
2018/01/23 Javascript
关于vue的语法规则检测报错问题的解决
2018/05/21 Javascript
Element-ui之ElScrollBar组件滚动条的使用方法
2018/09/14 Javascript
微信小程序仿知乎实现评论留言功能
2018/11/28 Javascript
js+HTML5 canvas 实现简单的加载条(进度条)功能示例
2019/07/16 Javascript
layui 上传文件_批量导入数据UI的方法
2019/09/23 Javascript
layer关闭弹出窗口触发表单提交问题的处理方法
2019/09/25 Javascript
angular inputNumber指令输入框只能输入数字的实现
2019/12/03 Javascript
vue中改变滚动条样式的方法
2020/03/03 Javascript
Python 解析XML文件
2009/04/15 Python
python和C语言混合编程实例
2014/06/04 Python
python登录豆瓣并发帖的方法
2015/07/08 Python
python中list列表的高级函数
2016/05/17 Python
利用Python中unittest实现简单的单元测试实例详解
2017/01/09 Python
Python编程实现从字典中提取子集的方法分析
2018/02/09 Python
浅析python中while循环和for循环
2019/11/19 Python
python图形开发GUI库pyqt5的详细使用方法及各控件的属性与方法
2020/02/14 Python
python GUI库图形界面开发之pyinstaller打包python程序为exe安装文件
2020/02/26 Python
John Varvatos官方网站:设计师男士时装
2017/02/08 全球购物
给领导的检讨书
2014/02/16 职场文书
捐款活动总结
2014/08/27 职场文书
2015小学教师年度工作总结
2015/05/12 职场文书
python机器学习Github已达8.9Kstars模型解释器LIME
2021/11/23 Python
Java虚拟机内存结构及编码实战分享
2022/04/07 Java/Android
python的html标准库
2022/04/29 Python
MySQL控制流函数(-if ,elseif,else,case...when)
2022/07/07 MySQL