事件流之事件冒泡与事件捕获<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 ...

随机推荐

&num;1015 &colon; KMP算法
kmp算法的定义可以从网上查找.我个人的理解是要从模式串中寻找出和模式串开头字母相同的字母个数,构建一个next数组用于匹配原串失败时判断模式串回溯的位置. 注意点:匹配成功后模式串的迭代因子j应该如 ...
C&num; 图片流下载&semi;图片流输出
图片流下载 string filePath = HttpContext.Current.Server.MapPath("/img/wxPic/"); if (!Directory. ...
WebSphere中对response&period;sendError()的处理与Tomcat不同
不同的地方在于,同样的代码[response.sendError(1);] 在Tomcat下,response.getResponseCode()的值是 1,而在Websphere下面则是 500. ...
Android中两种设置全屏的方法
设置全屏的两种方法: 第一种:在配置文件里面配置: <?xml version="1.0" encoding="utf-8"?><manife ...
《javascript dom编程艺术》笔记（二）——美术馆示例
这几天把这本书看完了,里面大部分知识我已经会了,所以看得就略简单,好多地方都没有再去动手去做,我知道这样是不对的,以后补吧. 现在我要做的是把这本书的笔记完结掉,不然总觉得有啥事没有做. 这个版本不是 ...
Goodle Clean设计架构
Goodle Clean设计架构 23 * @param <P> the response type 24 */ 25 public abstract class UseCase<Q ...
list、dict、tuple的一些小操作总结
一.list 1.赋值(append) list.append(data) 2.去重 list(set(list)) list_gpcode = list(set(list(dfQuery.index ...
谈谈如何从Apache官网扒文档
学习java的猴子至少要会看文档, 一.从Apache官网下载文档进入官网--components--例如点击FileUpload--点击最下面browser download area--点击bi ...
C语言精要总结-指针系列（一）
考虑到指针内容繁多,这里将指针作为一个系列,从简入繁,一点一点深挖并掌握这C语言的精华.初步计划如下此文为指针系列第一篇: C语言精要总结-指针系列(一) 内存与地址我们可以把内存看做一排连续的房 ...
在Eclipse中使用git把项目导入到git中--转载
[转载出处注明:http://www.zhangxiaofu.cn/java/commonTools/2015/0607/764.html] 一.原有项目: 项目名为TestGit 二.在osc@g ...