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 ...
随机推荐
- 4分钟了解nano编辑器和简单命令 2015.10.6
nano感觉并不常用,但是偶尔遇到过几次. nano命令是一个类似VI的编辑器,但是更简单,其中的i,a等命令似乎可以用,但是有些命令不可以用.保存和退出最大的区别在于退出方式,如果你要保存所做的修改 ...
- HDU 3652 B-number(数位DP)
题目链接 学习大神的数位DP模版. #include <iostream> #include <cstdio> #include <cstring> using n ...
- 如何更改tableView cell的accessoryView位置,如何让首尾的Separator不显示
一,如何更改tableView cell的accessoryView位置 1.实则是更改不了的,因此右边总会有一个小边距. 2.可以向 cell 的 contentView 中添加按钮放在右边,与 c ...
- 人工智能 --test
http://zhidao.baidu.com/link?url=9qp_SbSRfzMezkD25FZiWyNDsMxgcK6lecYYt0SW1ESsqkRaV5LYQ-0ysk3F2e35ajA ...
- 最大乘积 Maximun Product
最大乘积 题目链接:http://acm.hust.edu.cn/vjudge/contest/view.action?cid=84562#problem/B 题意: 输入n个元素组成的序列s,你需要 ...
- open Session In View和过滤器配置
Open Session In View模式的主要思想是:当Web Request(浏览器请求)开始时,自动打开Session,当Web Request结束时,自动关闭Session.也就是说,Ses ...
- mysql主从复制过滤
主从复制过滤: 配置文件中的[mysqld]块中: master:(考虑到即时点还原一般不在主过滤) binlog_do_db= #数据库白名单 binlog_ignore_db= #数据库白名单 s ...
- Linux 根据组名查询出该组内所有成员
目前linux中没有直接根据组名查询组员的命令. 目前系统提供的查找组员和组之间的关系的方法有两种, 一种是:查找/etc/passwd和/etc/group目录,根据/etc/group目录里面的组 ...
- 第1章 Bootstrap介绍
学习网址:http://www.bootcss.com/ 下载网址:http://v3.bootcss.com/ 下载后一共三个文件夹 css js fonts 引入的文件 <link rel= ...
- zk label控件内容换行
Label控件本身无法换行,不过div却可以,只要设置了div的宽度,那么就想如果在Label控件外套个div会怎样,结果可喜可乐: <div width="80px"> ...