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 遍历json数组的实现代码
Sep 22 Javascript
如何让页面加载完成后执行js
Jun 26 Javascript
JS正则表达式获取分组内容的方法详解
Nov 15 Javascript
JavaScript中的类(Class)详细介绍
Dec 30 Javascript
JS实现自动切换文字的导航效果代码
Aug 27 Javascript
原生JS和jQuery版实现文件上传功能
Apr 18 Javascript
AngularJS开发教程之控制器之间的通信方法分析
Dec 25 Javascript
AngularJS 购物车全选/取消全选功能的实现方法
Aug 14 Javascript
JavaScript中附件预览功能实现详解(推荐)
Aug 15 Javascript
Angular2+国际化方案(ngx-translate)的示例代码
Aug 23 Javascript
JS从非数组对象转数组的方法小结
Mar 26 Javascript
详解nvm管理多版本node踩坑
Jul 26 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 会话(session 时间设定)使用入门代码
2008/06/05 PHP
php cookie使用方法学习笔记分享
2013/11/07 PHP
PHP OPP机制和模式简介(抽象类、接口和契约式编程)
2014/06/09 PHP
PHP+jquery+ajax实现即时聊天功能实例
2014/12/23 PHP
URL编码转换,escape() encodeURI() encodeURIComponent()
2006/12/27 Javascript
DHTML Slide Show script图片轮换
2008/03/03 Javascript
js+CSS 图片等比缩小并垂直居中实现代码
2008/12/01 Javascript
jquery定时滑出可最小化的底部提示层特效代码
2013/10/02 Javascript
JS计算网页停留时间代码
2014/04/28 Javascript
JSON相关知识汇总
2015/07/03 Javascript
jquery可定制的在线UEditor编辑器
2015/11/17 Javascript
js H5 canvas投篮小游戏
2016/08/18 Javascript
微信公众号支付H5调用支付解析
2016/11/04 Javascript
JavaScript常用正则函数用法示例
2017/01/23 Javascript
Angular中ng-repeat与ul li的多层嵌套重复问题
2017/07/24 Javascript
深入理解Vue2.x的虚拟DOM diff原理
2017/09/27 Javascript
vue-router路由懒加载和权限控制详解
2017/12/13 Javascript
Vuex 使用及简单实例(计数器)
2018/08/29 Javascript
使用 Node.js 实现图片的动态裁切及算法实例代码详解
2018/09/29 Javascript
vuex2中使用mapGetters/mapActions报错的解决方法
2018/10/20 Javascript
[48:23]DOTA2上海特级锦标赛主赛事日 - 4 败者组第四轮#1COL VS EG第一局
2016/03/05 DOTA
[26:50]2018完美盛典DOTA2表演赛
2018/12/17 DOTA
使用Python解析JSON数据的基本方法
2015/10/15 Python
Saltstack快速入门简单汇总
2016/03/01 Python
教你学会使用Python正则表达式
2017/09/07 Python
python实现合并两个排序的链表
2019/03/03 Python
Python OpenCV调用摄像头检测人脸并截图
2020/08/20 Python
python点击鼠标获取坐标(Graphics)
2019/08/10 Python
python3 selenium自动化 下拉框定位的例子
2019/08/23 Python
AURALog面试题软件测试方面
2013/10/22 面试题
请说出以下代码输出什么
2013/08/30 面试题
人事专员岗位职责
2013/11/20 职场文书
运动会通讯稿50字
2014/01/30 职场文书
商务日语专业毕业生自荐信
2014/03/27 职场文书
社团活动总结格式
2014/08/29 职场文书
购房委托书
2014/10/15 职场文书