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 ...
随机推荐
- 【POJ2104/2761】K-th Number
Description You are working for Macrohard company in data structures department. After failing your ...
- linux系统下yum源的搭建
1.建立挂载点 系统默认在 /mnt目录 1>创建挂载点 mkdir -p /mnt/cdrom 参数-p是需要时创建目标目录的上层目录,但即使这些目录已存在也不当作错误处理 2>查看 ...
- 运行java的class文件方法详解
一.运行class文件 执行带main方法的class文件,命令行为:java <CLASS文件名>注意:CLASS文件名不要带文件后缀.class 例如: 复制代码代码如下: java ...
- （转载）zeromq使用注意点滴
zeromq使用注意点滴 1.关于介绍zeromq的就不说了,可以自己去看官方guide很详细 2.主要说下在使用过程中需要注意的地方 1)使用如果使用c++的接口的时候,在你自己的类中或者apach ...
- html使用心得
(1)<textarea style= "word-break:break-all" rows="5" cols="20"> 在 ...
- js中获取键盘事件【转】
<script type="text/javascript" language=JavaScript charset="UTF-8"> 2 docu ...
- IE 9 以下兼容HTML5
<head> <meta name="viewport" content="width=device-width,initial-scale=1.0&q ...
- ubuntu安装配置jdk tomcat mysql ...
安装之前大家一定要检查好各个版本问题 以免造成不兼容. (一)下载所需安装包: jdk-7u76-linux-x64.tar.gz apache-tomcat-7.0.63.tar.gz MySQL- ...
- Hibernate saveOrUpdate方法到底是怎么执行的？
saveOrUpdate方法,如果传入的对象有主键就执行更新,没有就执行新增.这句话误导了很多人. 究竟是执行新增还是更新,是要有上下文环境的.这个环境就是主键策略的选择. 主键生成方式为 手动设置: ...
- jquery ui dialog去掉右上角的叉号
var dialog = $("#id").dialog({ resizable:false, height:, width:, zIndex:, modal:true, open ...