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. Code[VS] 2152 滑雪题解

    Code[VS] 2152 滑雪题解 题目描述 Description trs喜欢滑雪.他来到了一个滑雪场,这个滑雪场是一个矩形,为了简便,我们用r行c列的矩阵来表示每块地形.为了得到更快的速度,滑行 ...

  2. CSS:z-index层级在IE中无效

    引用地址:http://apps.hi.baidu.com/share/detail/19853262 在CSS中,只能通过代码改变层级,这个属性就是z-index,要让z-index起作用有个小小前 ...

  3. POJ 1141 Brackets Sequence(DP)

    题目链接 很早 很早之前就看过的一题,今天终于A了.状态转移,还算好想,输出路径有些麻烦,搞了一个标记数组的,感觉不大对,一直wa,看到别人有写直接输出的..二了,直接输出就过了.. #include ...

  4. GSM 短信相关AT指令(转)

    // AT+CSMS 选择消息业务AT+CSMS=0 // SMS 的AT 命令兼容GSM 07.05 Phase 2AT+CSMS=1 // SMS 的AT 命令兼容GSM 07.05 Phase ...

  5. python成长之路——第一天

    一.python版本间的差异: 1.1:2.x与3.x版本对比 version 2.x 3.x print print " "或者print()打印都可以正常输出 只能print( ...

  6. 转自大楚网：微软SAPI：让你的软件能说会道

    [IT168专稿]“没声音,再好的戏也出不来.”这虽然是一句广告,但是也说出了一个道理,我们所开发的软件,特别是一些多媒体软件,要是能够发 出声音,能说会道,将为我们的软件增添不少光彩.同时,我们面临 ...

  7. 做为一名dba你应该知道这些数据恢复

    1.将备份数据   拉取到本地虚拟机上 进行恢复(千万不要把数据直接恢复到生产中,除非迫不得已!!)   2.在本地虚拟机上恢复之后,导出需要恢复的数据.   3.在本地虚拟机上恢复做恢复测试.   ...

  8. Hibernate的一级二级缓存机制配置与测试

    特别感谢http://www.cnblogs.com/xiaoluo501395377/p/3377604.html 在本篇随笔里将会分析一下hibernate的缓存机制,包括一级缓存(session ...

  9. mysqld诡异crash

    突然收到告警短信,提示有一组服务器MHA已经切换,登录服务器后查看错误日志如下(其中相关insert语句已经处理): mysql版本:5.5.24 :: InnoDB: Assertion failu ...

  10. Vue 双向数据绑定原理分析 以及 Object.defineproperty语法

    第三方精简版实现 https://github.com/luobotang/simply-vue Object.defineProperty 学习,打开控制台分别输入以下内容调试结果 userInfo ...