javascript的事件
前戏
今天在博客中看到了javascript的事件机制，就自己试试写一个简单的冒泡捕获测试，但是测试结果出乎了我的意料，主要是自己原来对事件了解不是很清楚，现在写篇博客记录下。
基础
先来看一下我在Aaron博客中截的一张图
DOM2中事件有三个阶段
- 事件的捕获阶段
- 事件的目标阶段
- 事件的冒泡阶段
事件的捕获阶段:是由document元素向发生事件的元素传递。
事件的目标阶段:是指在找到了发生事件的目标元素这个阶段，找到之后就会执行事件监听器。如果在目标元素上同时绑定捕获和冒泡阶段事件，事件的执行顺序与绑定的顺序有关。其实也好理解，如果是这样的话，在目标元素上绑定了两个阶段的监听事件，因为操作的元素就是目标元素，绑定的事件无须传递，索性就按绑定顺序执行，个人理解。
事件的冒泡阶段:指由目标元素向上传递，就是想父元素传递，如果遇到监听的事件就执行。可以这么理解，由于是子元素向祖先传递，祖先当然知道是自己下的事件被监听了，因为父元素一直包含子元素。
例子
http://sandbox.runjs.cn/show/whkkse7t
代码
<!DOCTYPE HTML>
<html>
<head>
<title>js事件</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
#outer{
border:1px solid red;
height:200px;
width:200px;
}
#middle{
border:1px solid blue;
height:100px;
width:100px;
margin:50px auto;
}
#inner{
border:1px solid black;
height:50px;
width:50px;
margin:25px auto;
}
</style>
<script type="text/javascript">
window.addEventListener("load",init,false);
function init(){
var obj = document.getElementById("middle");
obj.addEventListener("click",function(e){alert(e.target.id+" 冒泡")},false);//1
obj.addEventListener("click",function(e){alert(e.target.id+" 捕获")},true);//2
}
//document.addEventListener("DOMContentLoaded",function(){alert("s")},false);
//这里为了方便直接在同一个元素绑定了两个事件
//点击middle元素，依次会执行代码1和2，此时的执行顺序和绑定事件的顺序相同
//点击inner元素时，会先执行代码2再执行代码1，此时就先执行捕获阶段在执行冒泡阶段
//可以这么说 如果在目标元素上绑定事件，事件的执行顺序与绑定的执行顺序相同，否则先捕获阶段在冒泡阶段
</script>
</head>
<body>
<div id="outer">
<div id="middle">
<div id="inner">
</div>
</div>
</div>
</body> </html>
javascript的事件的更多相关文章
- jQuery $(document).ready()和JavaScript onload事件
jQuery $(document).ready()和JavaScript onload事件 Why we need a right time? 对元素的操作和事件的绑定需要等待一个合适的时机,可以看 ...
- Javascript事件模型系列（四）我所理解的javascript自定义事件
被我拖延了将近一个月的javascript事件模型系列终于迎来了第四篇,也是我计划中的最后一篇,说来太惭愧了,本来计划一到两个星期写完的,谁知中间遇到了很多事情,公司的个人的,搞的自己心烦意乱浮躁了一 ...
- javascript通用事件封装
随着最近几年Html5的兴起,越来越多的应用采用html5进行实现,一个优秀的网页应用不但需要美观简洁的UI界面,更需要一个良好的交互.网页应用大部分的交互需要用javascript事件进行实现.虽然 ...
- javascript对象事件绑定方法
javascript对象事件绑定方法 今天在做对象事件绑定的过程中出现了一点异外情况,由于事件方法是由参数传过来的,需要将当前对象call过去,方便方法体里直接调用this 错误写法 obj.oncl ...
- JavaScript的事件代理（转）
如果你想给网页添加点JavaScript的交互性,也许你已经听过JavaScript的事件代理(event delegation),并且觉得这是那些发烧友级别的JavaScript程序员才会关心的什么 ...
- [转]javascript指定事件处理程序包括三种方式：
javascript指定事件处理程序包括三种方式: (1):DOM0级事件处理程序 如: 代码如下: var btn=document.getElementById("mybtn" ...
- JavaScript中事件绑定的方法总结
最近收集了一些关于JavaScript绑定事件的方法,汇总了一下,不全面,但是,希望便于以后自己查看. JavaScript中绑定事件的方法主要有三种: 1 在DOM元素中直接绑定 2 JavaScr ...
- JavaScript的事件监听、捕获和冒泡
在前端开发中,我们经常需要对某些事件进行监听.这样只要在指定的元素上触发了该事件,就会执行一个回调函数来进行相关的操作. 而JavaScript中事件监听的方法总共有三种,分别如下: element. ...
- JavaScript 计时事件
JavaScript 计时事件 通过使用 JavaScript,我们有能力作到在一个设定的时间间隔之后来执行代码,而不是在函数被调用后立即执行.我们称之为计时事件. 在 JavaScritp 中使用计 ...
随机推荐
- 删除Windows 服务
删除的办法有两个: 办法一: 用sc.exe这个Windows命令 开始--运行--cmd.exe,然后输入sc就可以看到了.使用办法很简单: sc delete “服务名” (如果服务名中间有空格, ...
- C++ 之 const 随笔记
const关键字,相信对C语言有所了解的同学都应该知道他的作用:1.修饰常量,2.修饰指针,3.修饰函数 1.修饰常量 const修饰后的变量被定义为常量 2.修饰指针 当用const修饰指针的时候, ...
- SPFA算法学习笔记
一.理论准备 为了学习网络流,先水一道spfa. SPFA算法是1994年西南交通大学段凡丁提出,只要最短路径存在,SPFA算法必定能求出最小值,SPFA对Bellman-Ford算法优化的关键之处在 ...
- mysql linux终端登陆
mysql -uroot -hlocalhost -psorry 设置远程登录 用户名及密码 GRANT ALL PRIVILEGES ON *.* TO root@"%" IDE ...
- hdu 2073
ps:感觉纯数学题.....我的思路就是找规律,发现dp(x+y) 就是 (0,x+y)的值,然后再加上x*根号2.就是他的距离.然后两个距离相减的绝对值就是两个点之间的距离了. 代码: #inclu ...
- Poisson Distribution——泊松分布
老师留个小作业,用EXCEL做不同lambda(np)的泊松分布图,这里分别用EXCEL,Python,MATLAB和R简单画一下. 1. EXCEL 运用EXCEL统计学公式,POISSON,算出各 ...
- [SQL Basics] Indexes
An index is used to speed up searching in the database. By default, when you create this table, your ...
- BZOJ 2595 斯坦那树
很久以前就想做,后来弃坑了. 最近又在群里有人问了类似的问题,艾老师说是斯坦纳树(%%%) 就是状压DP,然后用Spfa对状态进行转移. #include <iostream> #incl ...
- SQL Analysis Services MDX 查询超时 解决办法
当页面有很多MDX语句查询的时候,会发生超时的情况. 解决办法: SQL Analysis Services所在的服务器(OLAP的文件夹下) 找到: msmdpump.ini 将: <Conf ...
- 多线程下HttpContext.Current 的问题
在项目中需要记录文本日志,为了加快响应速度所以用到了多线程. 但是以前的方法是不支持多线程的,程序运行错误. 追踪代码发现提示HttpContext为空. 1.HttpContext.Current表 ...