javascript 冒泡事件的理解一般是这样的：

比方页面上有一个BODY里面包含一个DIV,DIV中包含一个BUTTON。在BODY,DIV,BUTTON中都有一个ONCLICK事件，在BUTTON中又有一个ONCLICK事件。那么我单击BUTTON时会先执行BUTTON中的事件

然后再执行DIV 的事件再执行BODY中的事件.这就是JAVASCRIPT的事件冒泡了。JQUERY好像就只支持这种事件的冒泡。

但如果我想先执行BODY中的单击事件再执行BUTTON中的单击事件，应该怎么办呢？

以下是我的事件监听代码：

<html>

   <head>

      <title></title>

   </head>

   <body id='bodye'>

   <input type="button" value="test" id="test" />

   </body>

   <script type="text/javascript">

       function bodyEvent(){

          alert('body');

       }

       function buttonEvent(){

           alert('button');

       }

       document.body.onclick=bodyEvent;

       document.getElementById("test").onclick=buttonEvent;

                     //按以上的写法，会先弹出BUTTON,再弹出BODY

   </script>

</html>
document.body.addEventListener("click", function(){

            alert(this.id);

        }, false);

       document.getElementById("test").addEventListener("click",function(){

            alert(this.id);

       },true);

       document.getElementById("div").addEventListener("click",function(){

            alert(this.id);

       },true);

这里我强行的添加一个事件的监听，注意true与false这个参数，就可以打破原来的事件冒泡流了。TRUE则先执行外层的事件，如果是FALSE则保留原来的
执行方式。

javascript 事件的一点感悟的更多相关文章

  1. 【移动端兼容问题研究】javascript事件机制详解（涉及移动兼容）

    前言 这篇博客有点长,如果你是高手请您读一读,能对其中的一些误点提出来,以免我误人子弟,并且帮助我提高 如果你是javascript菜鸟,建议您好好读一读,真的理解下来会有不一样的收获 在下才疏学浅, ...

  2. 解析Javascript事件冒泡机制

    本资源引自: 解析Javascript事件冒泡机制 - 我的程序人生 - 博客频道 - CSDN.NET http://blog.csdn.net/luanlouis/article/details/ ...

  3. JavaScript事件流原理解析

    一.为什么会有这一篇的文章 国庆前几天由于任务比较重,要赶在国庆前把一个进度的任务开发完成,所以也就有点赶,但是却遇到了一个比较奇怪的Bug,导致了任务比预计的延迟了几个小时,对此深表遗憾,所以利用国 ...

  4. Javascript事件机制兼容性解决方案

    本文的解决方案可以用于Javascript native对象和宿主对象(dom元素),通过以下的方式来绑定和触发事件: 或者 var input = document.getElementsByTag ...

  5. Javascript事件模型系列（四）我所理解的javascript自定义事件

    被我拖延了将近一个月的javascript事件模型系列终于迎来了第四篇,也是我计划中的最后一篇,说来太惭愧了,本来计划一到两个星期写完的,谁知中间遇到了很多事情,公司的个人的,搞的自己心烦意乱浮躁了一 ...

  6. Javascript事件模型系列（一）事件及事件的三种模型

    一.开篇 在学习javascript之初,就在网上看过不少介绍javascript事件的文章,毕竟是js基础中的基础,文章零零散散有不少,但遗憾的是没有看到比较全面的系列文章.犹记得去年这个时候,参加 ...

  7. 【探讨】javascript事件机制底层实现原理

    前言 又到了扯淡时间了,我最近在思考javascript事件机制底层的实现,但是暂时没有勇气去看chrome源码,所以今天我来猜测一把 我们今天来猜一猜,探讨探讨,javascript底层事件机制是如 ...

  8. 重温javascript事件机制

    以前用过一段时间的jquery感觉太方便,太强大了,各种动画效果,dom事件.创建节点.遍历.控件及UI库,应有尽有:开发文档也很多,网上讨论的问题更是甚多,种种迹象表明jquery是一个出色的jav ...

  9. JavaScript事件

    关于JavaScript事件讲解得很全面的一篇文章:http://www.cnblogs.com/tugenhua0707/p/4501843.html 如下代码需要注意的一点是,除了getEvent ...

随机推荐

  1. ihhh题解

    10分做法: 由于空间卡得紧,所以给了10分暴力分0.0所以大家很容易就知道暴力就是线段树套ac自动机辣时间:$O((\sum |qSi| + \sum |nSi|)*log Q)$空间:$O((\s ...

  2. 【BZOJ】1856: [Scoi2010]字符串

    http://www.lydsy.com/JudgeOnline/problem.php?id=1856 题意:把n个1和m个0组成字符串,要求在组成的字符串中,任意的前k个字符1的个数不能少于0的个 ...

  3. UVA 558 判定负环，spfa模板题

    1.UVA 558 Wormholes 2.总结:第一个spfa,好气的是用next[]数组判定Compilation error,改成nexte[]就过了..难道next还是特殊词吗 题意:科学家, ...

  4. tomcat、腾讯云主机和微信

    腾讯云主机和微信 申请一个腾讯云上的服务器(在这里我是申请的Linux系统,里面自己事先装好了tomcat.jdk等所需要用到的工具,注意做好必要的配置工作) 连接服务器和部署项目时必要的步骤:1.将 ...

  5. HDU 2955（0-1背包问题）

    题目链接:http://acm.hust.edu.cn/vjudge/contest/view.action?cid=87125#problem/M 题目: Description The aspir ...

  6. Android自定义UI模板

    第一步:自定义xml属性 新建一个android项目,在values文件夹中新建一个atts.xml的文件,在这个xml文件中声明我们一会在使用自定义控件时候需要指明的属性.atts.xml < ...

  7. web实验指导书和课后习题参考答案

    实验指导书 :http://course.baidu.com/view/daf55bd026fff705cc170add.html 课后习题参考答案:http://wenku.baidu.com/li ...

  8. c#面向对象基础 类、方法、方法重载

    C#是纯粹的面向对象编程语言,它真正体现了“一切皆为对象”的精神.在C#中,即使是最基本的数据类型,如int,double,bool类型,都属于System.Object(Object为所有类型的基类 ...

  9. Html5 与 Html4 的区别

    HTML5是HTML标准的下一个版本.虽然HTML5没有完全颠覆HTML4,但是它们也有一些不同.最新最全的HTML5-HTML4对比信息 请看http://dev.w3.org/html5/html ...

  10. Neusoft(3)增加自己的内核模块

    Linux版本 Ubuntu12.04LTS,内核版本为3.2.0-26-generic-ape 具体方法如下: 1.建立源文件,假设文件目录为path,文件名为hello.c源代码如下: #incl ...