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 GUID生成器实现代码
Oct 31 Javascript
使用js复制链接中的部分文字的方法
Jul 30 Javascript
javascript回到顶部特效
Jul 30 Javascript
浅谈JavaScript 覆盖原型以及更改原型
Aug 31 Javascript
探究Vue.js 2.0新增的虚拟DOM
Oct 20 Javascript
JavaScript实现图片瀑布流和底部刷新
Jan 02 Javascript
vue2.0结合Element实现select动态控制input禁用实例
May 12 Javascript
Node.js利用console输出日志文件的方法示例
Apr 27 Javascript
layer关闭当前窗口页面以及确认取消按钮的方法
Sep 09 Javascript
JavaScript canvas实现雪花随机动态飘落
Feb 08 Javascript
javascript 易错知识点实例小结
Apr 25 Javascript
vue中父子组件传值,解决钩子函数mounted只运行一次的操作
Jul 27 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
sony ICF-2010 拆解与改装
2021/03/02 无线电
用PHP和ACCESS写聊天室(六)
2006/10/09 PHP
PHP5+UTF8多文件上传类
2008/10/17 PHP
php的GD库imagettftext函数解决中文乱码问题
2015/01/24 PHP
PHP加密解密字符串汇总
2015/04/26 PHP
PHP 设计模式系列之 specification规格模式
2016/01/10 PHP
PHP获取链表中倒数第K个节点的方法
2018/01/18 PHP
PHP使用curl_multi_select解决curl_multi网页假死问题的方法
2018/08/15 PHP
php use和include区别总结
2019/10/13 PHP
javascript数组操作方法小结和3个属性详细介绍
2014/07/05 Javascript
jQuery实现的产品自动360度旋转展示特效源码分享
2015/08/21 Javascript
基于jQuery仿淘宝产品图片放大镜特效
2020/10/19 Javascript
javascript RegExp 使用说明
2016/05/21 Javascript
快速实现JS图片懒加载(可视区域加载)示例代码
2017/01/04 Javascript
原生js实现秒表计时器功能
2017/02/16 Javascript
在Vue组件化中利用axios处理ajax请求的使用方法
2017/08/25 Javascript
图片懒加载imgLazyLoading.js使用详解
2020/09/15 Javascript
微信小程序中插入激励视频广告并获取收益(实例代码)
2019/12/06 Javascript
解决vue-router路由拦截造成死循环问题
2020/08/05 Javascript
剖析Django中模版标签的解析与参数传递
2015/07/21 Python
python 转换 Javascript %u 字符串为python unicode的代码
2016/09/06 Python
【Python】Python的urllib模块、urllib2模块批量进行网页下载文件
2016/11/19 Python
使用python爬取抖音视频列表信息
2019/07/15 Python
Python @property原理解析和用法实例
2020/02/11 Python
协程Python 中实现多任务耗资源最小的方式
2020/10/19 Python
Python如何实现Paramiko的二次封装
2021/01/30 Python
Stuart Weitzman美国官网:美国奢华鞋履品牌
2016/08/18 全球购物
美国旅游网站:Tours4Fun
2017/02/17 全球购物
法国女性内衣购物网站:Glamuse
2019/05/13 全球购物
YSL圣罗兰美妆俄罗斯官网:Yves Saint Lauret RU
2020/09/23 全球购物
大学秋游活动方案
2014/02/11 职场文书
行政主管岗位职责
2015/02/03 职场文书
2015年艾滋病宣传活动总结
2015/03/27 职场文书
在校生证明
2015/06/17 职场文书
Redis主从配置和底层实现原理解析(实战记录)
2021/06/30 Redis
MSSQL基本语法操作
2022/04/11 SQL Server