事件流之事件冒泡与事件捕获<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 ...
随机推荐
- Eclipse 常用快捷键 (动画讲解)
Eclipse有强大的编辑功能, 工欲善其事,必先利其器, 掌握Eclipse快捷键,可以大大提高工作效率. 编辑相关快捷键 注释 Ctrl + / 快速修复 Ctrl + ...
- 2013 duilib入门简明教程 -- XML配置界面(6)
前面那些教程都是为了让小伙伴们从win32.MFC过渡到duilib,让大家觉得duilib不是那么陌生,如果大家现在还对duilib非常陌生的话,那就说明前面的教程做得不好,请大家在下面留言 ...
- iOS—Xcode 7真机测试
Xcode 7真机测试详解 1.准备 注意:一定要让你的真机设备的系统版本和app的系统版本想对应,如果不对应就会出现一个很常见的问题:could not find developer disk im ...
- java IO流 之 其他流
一.内存操作流(ByteArrayInputStream.ByteArrayOutputStream) (一). public class ByteArrayInputStream extends ...
- Java学习笔记（03）
一.回顾运算符: 一．控制语句 1.1 顺序结构 (最常见的) 特点:代码从上往下依次执行
- 高级javascript---变量作用域
变量作用域 (JavaScript) JavaScript 有两个范围:全局和局部. 在函数定义之外声明的变量是全局变量,它的值可在整个程序中访问和修改. 在函数定义内声明的变量是局部变量. 每当执行 ...
- MyCAT日志分析
MyCAT日志对于了解MyCAT的运行信息不可获取,譬如MyCAT是否采用读写分离,对于一个查询语句,MyCAT是怎样执行的,每个分片会分发到哪个节点上等等. 默认是info级别,通过log4j.xm ...
- EntityFramework 7 Join Count LongCount 奇怪问题
先吐槽一下,EF7 目前来说,真对的起现在的版本命名:"EntityFramework": "7.0.0-beta1". 这篇博文纪录一下:当 Linq 查询中 ...
- 如何 判断 设备 是否 连接 上 了 wifi
这里,我给出一个函数 public boolean sale_connect_check(WifiConfiguration wcg,Context context) { boolean judge_ ...
- Understanding delete
简述 我们都知道无法通过delete关键字针对变量和函数进行操作,而对于显示的对象属性声明却可以进行,这个原因需要深究到js的实现层上去,让我们跟随 Understanding delete 来探究一 ...