事件流之事件冒泡与事件捕获<JavaScript高级程序设计>学习笔记
1.事件流
浏览器开发团队遇到一个很有意思问题：页面的那一部分会拥有特定的事件？
对于理解这个问题您可以想象画在一张纸上的一组同心圆，如果你把手指放在圆心上，那么你的手指指向的其实不是一个圆，而是纸上所有的圆。放到实际页面中就是，你点击一个按钮，而是纸上所有的圆。
<栗子：现实生活中的声波、水波>
事件流：从页面中接收事件的顺序，通俗说：用户操作DOM的一系列行为交互.
2.事件冒泡
事件冒泡：IE的事件流叫事件冒泡，即事件开始由最具体的元素（文档中嵌套层次最深的那个元素）接收，然后逐级向上传播到较为不具体的元素（html）
栗子：点击页面中的button元素，那么这个事件会按照如下顺序传播<Chrome浏览器>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Event Bubbling Example</title>
<script type="text/javascript">
window.onload=function(){
var oBtn=document.getElementById('button');
oBtn.onclick = function() {
console.log('1. You click button');
};
document.body.onclick = function() {
console.log('2. You click body');
};
document.onclick = function() {
console.log('3. You click document');
};
window.onclick = function() {
console.log('4. You click window');
};
}
</script>
</head>
<body>
<div id="box">
<input type="button" value="Click Me" id="button" />
</div>
</body>
</html>
3.事件捕获
a.事件捕获：即事件开始由最不具体的元素接收，然后逐级向下传播到为最具体的目标元素
为了模拟实现事件捕获得了解一下addEventListener
b.addEventListener 为文档节点、document、window 或 XMLHttpRequest 注册事件处理程序
代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Event Bubbling Example</title>
<script type="text/javascript">
window.onload=function(){
var oBtn=document.getElementById('button');
oBtn.addEventListener('click', function(){
console.log('1. You click button');
},true);
document.body.addEventListener('click', function(){
console.log('2. You click body');
},true);
document.addEventListener('click', function(){
console.log('3. You click document');
},true);
window.addEventListener('click', function(){
console.log('4. You click window');
},true);
}
</script>
</head>
<body>
<div id="box">
<input type="button" value="Click Me" id="button" />
</div>
</body>
</html>
综上所述：事件捕获、事件目标、事件冒泡如下图所示：
事件流之事件冒泡与事件捕获<JavaScript高级程序设计>学习笔记的更多相关文章
- JavaScript高级程序设计学习笔记之事件
1.事件流 事件流描述的是从页面中接收事件的顺序. 事件冒泡 IE的事件流叫做事件冒泡(event bubbling),即事件开始时由最具体的元素(文档中嵌套层次最深的那个节点)接收,然后逐级向上传播 ...
- JavaScript高级程序设计学习笔记第十三章--事件
事件冒泡: IE 的事件流,事件开始时由最具体的元素(文档中嵌套层次最深的那个节点)接收,然后逐级向上传播到较为不具体的节点(文档).例如: <!DOCTYPE html> <htm ...
- JavaScript高级程序设计学习笔记--事件
HTML事件处理程序 <input type="button" value="Click Me" onclick"showMessage()&q ...
- Javascript高级编程学习笔记（57）—— 事件（1）事件流
事件 JS与HTML的交互是通过事件实现的 而事件指的就是:文档或浏览器窗口特定的交互瞬间 可以通过侦听器来预定事件,以便在事件发生时执行相应的代码 这种模式也是设计模式中的观察者模式 事件流 有了事 ...
- JS高级程序设计学习笔记之JS事件（1）
事件流 冒泡 定义:事件开始时由最具体的元素接收,然后逐级上传到较为不具体的节点.(IE9.FF.Chrome.Safari会将事件一直冒泡到window对象.IE5.5及其以下会跳过<html ...
- 《JavaScript高级程序设计》笔记：事件（十三）
事件流 事件冒泡 IE的事件流叫做事件冒泡,即事件开始时由最具体的元素接收,然后逐级向上传播到较为不具体的节点(文档).如下代码: <body> <div id="myDi ...
- Javascript高级编程学习笔记（59）—— 事件（3）事件对象
事件对象 在触发DOM‘事件时,会产生一个事件对象 event 该对象包含着所有与事件有关的信息 所有浏览器都支持 event 对象但是支持的方式有所不同 DOM事件对象 兼容DOM的浏览器会将eve ...
- Javascript高级编程学习笔记（58）—— 事件（2）事件处理程序
事件处理程序 事件处理程序即响应某个事件的函数 事件处理程序以 “on” 开头 如“onclick”,“onload” HTML事件处理程序 某个元素支持的每种事件都可以使用一个与响应的事件处理程序同 ...
- Javascript高级编程学习笔记（66）—— 事件（10）变动事件
变动事件 DOM2级的变动事件,能在DOM中的一部分发生变化时给出提示 变动事件是为XML或HTML DOM 设计的,并不特定于某种语言 DOM2级定义了如下变动事件: DOMSubtreeModif ...
随机推荐
- jquery 拖拽，框选的一点积累
拖拽draggable,框选 selectable,按ctrl多选,临近辅助对齐,从工具栏拖工具 等,和jqueryui的selectable不同,是在一个父div里框选子div(类似框选文件),一 ...
- Android之线程池深度剖析
1.线程池的引入 引入的好处: 1)提升性能.创建和消耗对象费时费CPU资源 2)防止内存过度消耗.控制活动线程的数量,防止并发线程过多. 使用条件: 假设在一台服务器完成一 ...
- Visual Studio中没有为此解决方案配置选中要生成的项目
问题: Visual Studio点击"生成解决方案"时,出现"没有为此解决方案配置选中要生成的项目". 解决方法: 菜单->生成->配置管理器-& ...
- JAVA--继承
项目开发遇到一个问题,稀里糊涂给实现了,现在重点讨论一下这是个什么情况,大神们如果看到希望给点指点. 问题:子类与父类具有相同的属性和方法,将子类实例化为父类,调用对应属性的get.set方法,打印出 ...
- Mac OSX网络诊断命令
作者:Vamei 出处:http://www.cnblogs.com/vamei 欢迎转载,也请保留这段声明.谢谢! 下面是一些Mac OSX下常用的网络诊断命令.它们能帮助我们发现网络问题.文中提到 ...
- 如何将MySQL help contents的内容有层次的输出
经常会遇到这种情况,在一个不能上网的环境通过MySQL客户端登录数据库,想执行一个操作,却忘了操作的具体语法,各种不方便. 其实,MySQL数据库内置了帮助文档,通过help contents即可查看 ...
- Why is HttpContext.Current null after await?
今天在对项目代码进行异步化改进的时候,遇到一个奇怪的问题(莫笑,以前没遇过),正如标题一样,HttpContext.Current 在 await 异步执行之后,就会变为 null. 演示代码: pu ...
- (十四)WebGIS中地图放大缩小的设计和实现
文章版权由作者李晓晖和博客园共有,若转载请于明显处标明出处:http://www.cnblogs.com/naaoveGIS/. 1.背景 在上一章中,我们给出了整个工具栏设计的核心,使用命令模式,并 ...
- Node.js、express、mongodb 实现分页查询、条件搜索
前言 在上一篇Node.js.express.mongodb 入门(基于easyui datagrid增删改查) 的基础上实现了分页查询.带条件搜索. 实现效果 1.列表第一页. 2.列表第二页 3. ...
- js实现动画效果框架
RT,是参照慕课的教程做的.两个多小时的教程,看完了然后晚上的时候做了下,看的时候感觉明白了,但其实做的时候还是有很多小细节需要处理的. 上代码,思想什么的直接去慕课看教程就好了.点击这里 注释也比较 ...