1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml" >
  3. <head>
  4. <title>JS中的事件冒泡</title>
  5. <mce:script type="text/javascript"><!--
  6. function ClickTr()
  7. {
  8. alert("TR");
  9. }
  10. function ClickTd()
  11. {
  12. alert("TD");
  13. //如果不加下面的代码点击先会弹出TD然后弹出TR,原因是HTML是对象结构当点击AAA的时候(执行),会冒泡到TR-->table-->body->document->window,当用event.cancelBubble=true的时候就说明阻止该冒泡行为
  14. event.cancelBubble=true;
  15. }
  16. // --></mce:script>
  17. </head>
  18. <body>
  19. <div style="background-color:Azure;" mce_style="background-color:Azure;">目的当点击BBB的时候弹出TR,当点击AAA的时候弹出TD</div>
  20. <table>
  21. <tr onclick="ClickTr();">
  22. <td onclick="ClickTd();">AAA</td>
  23. <td>BBB</td>
  24. </tr>
  25. </table>
  26. </body>
  27. </html>

js中冒泡事件的更多相关文章

  1. js中冒泡事件和捕获事件

    js中冒泡事件和捕获事件: 冒泡事件:冒泡事件是从里向外,即是从被绑定元素开始一直向外到达页面的所有祖先元素都会被触发,这 一过程被称为事件冒泡.这个事件从原始元素开始一直冒泡到DOM树的最上层 捕获 ...

  2. 怎么理解js中的事件委托

    怎么理解js中的事件委托 时间 2015-01-15 00:59:59  SegmentFault 原文  http://segmentfault.com/blog/sunchengli/119000 ...

  3. 看懂此文,不再困惑于 JS 中的事件设计

    看懂此文,不再困惑于 JS 中的事件设计 今天刚在关注的微信公众号看到的文章,关于JS事件的,写的很详细也很容易理解,相关的知识点都有总结到,看完就有种很舒畅的感觉,该串起来的知识点都串起来了.反正一 ...

  4. DOM 以及JS中的事件

    [DOM树节点] DOM节点分为三大节点:元素节点,文本节点,属性节点. 文本节点,属性节点为元素节点的两个子节点通过getElment系列方法,可以去到元素节点 [查看节点] 1 document. ...

  5. 从零开始的JS生活(二)——BOM、DOM与JS中的事件

    上回书说道,JS中变量.运算符.分支结构.循环和嵌套循环等内容.本回就由本K给大伙唠唠JS中的BOM.DOM和事件. 一."花心大萝卜"--BOM 1.震惊,FFF团为何对BOM举 ...

  6. JS中的事件以及DOM 操作

    [DOM树节点] DOM节点分为三大节点:元素节点,文本节点,属性节点. 文本节点,属性节点为元素节点的两个子节点通过getElment系列方法,可以去到元素节点 [查看节点] 1 document. ...

  7. JS中的事件&对象

    一.JS中的事件 (一)JS中的事件分类 1.鼠标事件 click/dblclick/onmouseover/onmouseout 2.HTML事件 onload/onscroll/onsubmit/ ...

  8. JS学习五(js中的事件)

    [JS中的事件分类] 1.鼠标事件 click/bdlclick/onmouseover/onmouseout 2. HTML事件 onload/onscroll/onsubmit/onchange/ ...

  9. JS基础--函数与BOM、DOM操作、JS中的事件以及内置对象

       前   言 絮叨絮叨 这里是JS基础知识集中讲解的第三篇,也是最后一篇,三篇JS的基础,大多是知识的罗列,并没有涉及更难得东西,干货满满!看完这一篇后,相信许多正在像我一样正处于初级阶段的同学, ...

随机推荐

  1. APP性能测试工具

    各种自动化工具作用: 自动化:appium 针对接口做压测:jmeter 执行一段脚本,随机乱点:monkey 如果有用loadrunner12的话 也可以用mobilerecoder录制脚本(lr1 ...

  2. 新手购买海外VPS主机需要注意的几个账户安全问题

    一般我们用户的项目需要,可能会较多的购买海外的VPS主机项目居多,其实我也比较喜欢国内的阿里云等产品,但是后者需要的一些政策还是比较麻烦, 所以在操作一些调试项目的时候我比较倾向于选择较为便宜的海外V ...

  3. python:os.path

    __file__ " here = os.path.abspath(os.path.dirname(__file__)) 当"print os.path.dirname(__fil ...

  4. java 读取excel(Map结构)xls

    package com.sun.test; import java.io.FileInputStream;import java.io.FileNotFoundException;import jav ...

  5. nefu 1191 平行宇宙 (bfs)

    Description 小k是时空贸易者,他经常在两个平行宇宙之间往来经商,现在他要从S点到达E点,问最少需要多长时间.(已知小k在同一个宇宙中只能向上下左右四个方向移动,每次移动需要1个单位时间,且 ...

  6. chapter9_4 非抢占式的多线程

    协同程序与常规的多线程不同之处:协同程序是非抢占式的. 当一个协同程序运行时,是无法从外部停止它的.只有当协同程序显式地调用yield时,它才会停止. 当不存在抢先时,编程会变得简单很多,无须为同步的 ...

  7. Openjudge-计算概论(A)-奇数单增序列

    描述: 给定一个长度为N(不大于500)的正整数序列,请将其中的所有奇数取出,并按升序输出. 输入共2行:第1行为 N:第2行为 N 个正整数,其间用空格间隔.输出增序输出的奇数序列,数据之间以逗号间 ...

  8. iOS应用性能调优的4个建议和技巧

    任何一个能在用户手机屏幕中占有一席之地的iOS app都包含3个关键因素:想法好.设计出色.性能卓越.本文将分享一些iOS应用性能调优的4个建议和技巧. Tip #1:把图片资源压缩到最小.    i ...

  9. java反射机制(访问私有字段和私有方法)

    来自:http://tutorials.jenkov.com/java-reflection/private-fields-and-methods.html 尽管我们通常认为通过JAVA的反射机制来访 ...

  10. D - 小晴天老师系列——晴天的后花园

    D - 小晴天老师系列——晴天的后花园 Time Limit: 10000/5000MS (Java/Others)    Memory Limit: 128000/64000KB (Java/Oth ...