javascript 事件的一点感悟
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 事件的一点感悟的更多相关文章
- 【移动端兼容问题研究】javascript事件机制详解（涉及移动兼容）
前言 这篇博客有点长,如果你是高手请您读一读,能对其中的一些误点提出来,以免我误人子弟,并且帮助我提高 如果你是javascript菜鸟,建议您好好读一读,真的理解下来会有不一样的收获 在下才疏学浅, ...
- 解析Javascript事件冒泡机制
本资源引自: 解析Javascript事件冒泡机制 - 我的程序人生 - 博客频道 - CSDN.NET http://blog.csdn.net/luanlouis/article/details/ ...
- JavaScript事件流原理解析
一.为什么会有这一篇的文章 国庆前几天由于任务比较重,要赶在国庆前把一个进度的任务开发完成,所以也就有点赶,但是却遇到了一个比较奇怪的Bug,导致了任务比预计的延迟了几个小时,对此深表遗憾,所以利用国 ...
- Javascript事件机制兼容性解决方案
本文的解决方案可以用于Javascript native对象和宿主对象(dom元素),通过以下的方式来绑定和触发事件: 或者 var input = document.getElementsByTag ...
- Javascript事件模型系列（四）我所理解的javascript自定义事件
被我拖延了将近一个月的javascript事件模型系列终于迎来了第四篇,也是我计划中的最后一篇,说来太惭愧了,本来计划一到两个星期写完的,谁知中间遇到了很多事情,公司的个人的,搞的自己心烦意乱浮躁了一 ...
- Javascript事件模型系列（一）事件及事件的三种模型
一.开篇 在学习javascript之初,就在网上看过不少介绍javascript事件的文章,毕竟是js基础中的基础,文章零零散散有不少,但遗憾的是没有看到比较全面的系列文章.犹记得去年这个时候,参加 ...
- 【探讨】javascript事件机制底层实现原理
前言 又到了扯淡时间了,我最近在思考javascript事件机制底层的实现,但是暂时没有勇气去看chrome源码,所以今天我来猜测一把 我们今天来猜一猜,探讨探讨,javascript底层事件机制是如 ...
- 重温javascript事件机制
以前用过一段时间的jquery感觉太方便,太强大了,各种动画效果,dom事件.创建节点.遍历.控件及UI库,应有尽有:开发文档也很多,网上讨论的问题更是甚多,种种迹象表明jquery是一个出色的jav ...
- JavaScript事件
关于JavaScript事件讲解得很全面的一篇文章:http://www.cnblogs.com/tugenhua0707/p/4501843.html 如下代码需要注意的一点是,除了getEvent ...
随机推荐
- HDU 4003 Find Metal Mineral(分组背包+树形DP)
题目链接 很棒的一个树形DP.学的太渣了. #include <cstdio> #include <string> #include <cstring> #incl ...
- AppStore上传条例
1. 条款和条件1.1 为App Store开发程序,开发者必须遵守 Program License Agreement (PLA).人机交互指南(HIG)以及开发者和苹果签订的任何协议和合同.以下规 ...
- ECLIPSE下SVN的创建分支/合并/切换使用
最近接项目要求,要在svn主干上创建分支,用分支来进行程序的bug修改,而主干上进行新功能的开发.分支上的bug修改完,发布后,可以合并到主干上.项目程序可以在主干和分支之间进行切换,来实现主干和分支 ...
- javascript模块化应用
这是一篇关于js模块化历程的长长的流水账,记录js模块化思想的诞生与变迁,展望ES6模块化标准的未来.经历过这段历史的人或许会感到沧桑,没经历过的人也应该知道这段历史. 无模块时代 在ajax还未提出 ...
- POJ 1016 模拟字符串
Numbers That Count Time Limit: 1000MS Memory Limit: 10000K Total Submissions: 20396 Accepted: 68 ...
- WebApp 里Meta标签大全，webappmeta标签大全
1.先说说mate标签里的viewport: viewport即可视区域,对于桌面浏览器而言,viewport指的就是除去所有工具栏.状态栏.滚动条等等之后用于看网页的区域.对于传统WEB页面来说,9 ...
- java 极光推送
Web.xml配置文件 <context-param> <param-name>contextConfigLocation</param-name> <par ...
- 房间安排-nyoj168
描述 2010年上海世界博览会(Expo2010),是第41届世界博览会.于2010年5月1日至10月31日期间,在中国上海市举行.本次世博会也是由中国举办的首届世界博览会.上海世博会以“城市,让生活 ...
- 一个xib钟多个Cell
在实际开发中,有时候需要在一个xib钟拖几个cell,注意连线过程的object选择,不然出现没反应的现象. 例如: 在下图中,我在一个xib钟创建了五个cell,他们分别是:收货地址.订单信息.支付 ...
- BizTalk开发系列(二十三) BizTalk性能指标参考
BizTalk项目目前比较少,使用的客户也不多.大多只知道BizTalk是一个不错的产品,是Microsoft SOA平台的核心产品,不过还没有将其应用到生产环境.还有一些客户对BizTalk的性能不 ...