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 相关文章推荐
js中将字符串转换成json的三种方式
Jan 12 Javascript
6款新颖的jQuery和CSS3进度条插件推荐
Mar 05 Javascript
JS实现两表格里数据来回转移的方法
May 28 Javascript
jQuery实现多级下拉菜单jDropMenu的方法
Aug 28 Javascript
浅谈EasyUI常用控件的禁用方法
Nov 09 Javascript
React-Native中禁用Navigator手势返回的示例代码
Sep 09 Javascript
vue 实现全选全不选的示例代码
Mar 29 Javascript
vue组件之间通信方式实例总结【8种方式】
Feb 22 Javascript
微信小程序云开发实现数据添加、查询和分页
May 17 Javascript
JS实现滑动拼图验证功能完整示例
Mar 29 Javascript
基于vue项目设置resolves.alias: '@'路径并适配webstorm
Dec 02 Vue.js
一文彻底理解js原生语法prototype,__proto__和constructor
Oct 24 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中几种常见安全设置详解
2010/04/06 PHP
深入理解PHP原理之Session Gc的一个小概率Notice
2011/04/12 PHP
使用PHP静态变量当缓存的方法
2013/11/13 PHP
详解yii2实现分库分表的方案与思路
2017/02/03 PHP
PHP基于Redis消息队列实现发布微博的方法
2017/05/03 PHP
ThinkPHP5与单元测试PHPUnit使用详解
2020/02/23 PHP
基于jQuery图片平滑连续滚动插件
2009/04/27 Javascript
js 数组实现一个类似ruby的迭代器
2009/10/27 Javascript
使用Jquery打造最佳用户体验的登录页面的实现代码
2011/07/08 Javascript
jquery foreach使用示例
2013/09/12 Javascript
你未必知道的JavaScript和CSS交互的5种方法
2014/04/02 Javascript
javascript校验价格合法性实例(必须输入2位小数)
2014/05/05 Javascript
用JavaScript实现PHP的urlencode与urldecode函数
2015/08/13 Javascript
下一代Bootstrap的5个特点 超酷炫!
2016/06/17 Javascript
使用vue.js制作分页组件
2016/06/27 Javascript
JS/jQuery判断DOM节点是否存在的简单方法
2016/11/24 Javascript
jquery表单插件form使用方法详解
2017/01/20 Javascript
js基于myFocus实现轮播图效果
2017/02/14 Javascript
Bootstrap Tree View简单而优雅的树结构组件实例解析
2017/06/15 Javascript
JS图片轮播与索引变色功能实例详解
2017/07/06 Javascript
JavaScript伪数组用法实例分析
2017/12/22 Javascript
小程序红包雨的实现示例
2019/02/19 Javascript
js时间戳转yyyy-MM-dd HH-mm-ss工具类详解
2019/04/30 Javascript
微信小程序身份证验证方法实现详解
2019/06/28 Javascript
Python装饰器的函数式编程详解
2015/02/27 Python
Python实现建立SSH连接的方法
2015/06/03 Python
python中的错误处理
2016/04/10 Python
Python 专题一 函数的基础知识
2017/03/16 Python
python有序查找算法 二分法实例解析
2020/02/18 Python
keras model.fit 解决validation_spilt=num 的问题
2020/06/19 Python
Python字典取键、值对的方法步骤
2020/09/30 Python
H5 canvas中width、height和style的宽高区别详解
2018/11/02 HTML / CSS
龟牌英国商店:Turtle Wax Brand Store UK
2019/07/02 全球购物
初始化了一个没有run()方法的线程类,是否会出错?
2014/03/27 面试题
财务人员的自我评价范文
2014/03/03 职场文书
Matlab如何实现矩阵复制扩充
2021/06/02 Python