事件流之事件冒泡与事件捕获<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 ...
随机推荐
- SSIS的 Data Flow 和 Control Flow
Control Flow 和 Data Flow,是SSIS Design中主要用到的两个Tab,理解这两个Tab的作用,对设计更高效的package十分重要. 一,Control Flow 在Con ...
- 【Win 10 应用开发】打印UI元素
Windows App支持将UI界面进行打印的功能,这与浏览器中的打印网页的用途相近,其好处就是“所见即所得”,直接把界面上呈现的内容打印下来,比重新创建打印图像方便得多. 要在通用App中实现打印, ...
- 【转】WPF 单选的Checkbox
今天同事要在DataGrid里用单选的Checkbox,我感觉很多余,因为正常DataGrid就可以单选,为什么还要加一列Checkbox,但是人家要求再那里,我就告诉他,可以用RadioButton ...
- 新作《ASP.NET MVC 5框架揭秘》正式出版
ASP.NET MVC是一个建立在ASP.NET平台上基于MVC模式的Web开发框架,它提供了一种与Web Form完全不同的开发方式.ASP.NET Web Form借鉴了Windows Form基 ...
- [ASP.NET MVC] 利用自定义的AuthenticationFilter实现Basic认证
很多情况下目标Action方法都要求在一个安全上下文中被执行,这里所谓的安全上下文主要指的是当前请求者是一个经过授权的用户.授权的本质就是让用户在他许可的权限范围内做他能够做的事情,授权的前提是请求者 ...
- SubSonic3.0使用例子
前段时间开发的框架使用了SubSonic2.2以后,觉得开发效率提高了不少,后期维护起来也非常方便,不由的喜欢上了SubSonic.中间有想过升级到更高版本,但度娘一下就放弃了,只有极少的中文版说明, ...
- EntityFramework DbContext 线程安全
先看这一段异常信息: A second operation started on this context before a previous asynchronous operation compl ...
- EF7 Code First Only－所引发的一些“臆想”
At TechEd North America we were excited to announce our plans for EF7, and even demo some very early ...
- Repository 仓储，你的归宿究竟在哪？（一）－仓储的概念
写在前面 写这篇博文的灵感来自<如何开始DDD(完)>,很感谢young.han兄这几天的坚持,陆陆续续写了几篇有关于领域驱动设计的博文,让园中再次刮了一阵"DDD探讨风&quo ...
- 如何做优化，UITabelView才能更加顺滑 （转载）
这篇文章是前两周@叶孤城叶大在微信群里面的分享,一直到这两天才翻出来研究.很多实用的东西,不过由于水平有限,有些地方没能翻译好,还请大家指正. 我已经在iOS这个最好的移动平台上有几年的开发经验了.在 ...