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. /var/log目录下的20个Linux日志文件功能详解

    如果愿意在Linux环境方面花费些时间,首先就应该知道日志文件的所在位置以及它们包含的内容.在系统运行正常的情况下学习了解这些不同的日志文件有助于你在遇到紧急情况时从容找出问题并加以解决. 以下介绍的 ...

  2. java 反取字符串

    public class demo2 { /** * 2 : 将字符串反取出来 新中国好 好国中新 */ public static void main(String[] args) { String ...

  3. Daily Scrum 10.31

    今天是万圣节,也是编译课程设计第一次作业截至的日子,但由于大家对时间的合理安排,我们还是完成了一定的任务量. 下面是今天的Task统计: 不仅燃尽图和燃速图出不来,连那个所有迭代状态的图也出不来了.. ...

  4. 实验验证redis的快照和AOF

    安装配置redis http://www.cnblogs.com/myrunning/p/4222385.html 验证redis的主从复制 http://www.cnblogs.com/myrunn ...

  5. vs2013如何在C++中调用Lua（二）

    Lua学习笔记 vs2013如何在C++中调用Lua (此为转载教程) 本人试过完全可行 一.准备工作 1.下载Lua源码,地址:http://www.lua.org/download.html(我用 ...

  6. c++之vector

    vector是STL中最常见的容器,它是一种顺序容器,支持随机访问.vector是一块连续分配的内存,从数据安排的角度来讲,和数组极其相似, 不同的地方就是:数组是静态分配空间,一旦分配了空间的大小, ...

  7. 使用dd制作文件夹的img

    du -sh originfile //先看看需要制作的源文件夹大小,假如15M dd if=/dev/zero of=new_img.img bs=1024 count=20000 //生成20M的 ...

  8. P4实验问题 解决python模块导入

    参考:Python导入自定义包或模块 在执行./run_demo.sh的过程中,遇到了python的模块问题: root@ubuntu:/home/wasdns/tutorials/SIGCOMM_2 ...

  9. mybatis底层源码分析之－－配置文件读取和解析

    现在企业级开发中ssm是很常见的技术标配,mybatis比hibernate轻量了很多,而且学习成本相对较低,简单易上手. 那么,问题来了,简单好用的mybatis底层到底是如何实现的呢?都使用了什么 ...

  10. Android SDK路径不能含有空格

    错误, android sdk location shoud not contain whitespace,as this can cause problems with thte ndk tools