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高级程序设计>学习笔记的更多相关文章

  1. JavaScript高级程序设计学习笔记之事件

    1.事件流 事件流描述的是从页面中接收事件的顺序. 事件冒泡 IE的事件流叫做事件冒泡(event bubbling),即事件开始时由最具体的元素(文档中嵌套层次最深的那个节点)接收,然后逐级向上传播 ...

  2. JavaScript高级程序设计学习笔记第十三章--事件

    事件冒泡: IE 的事件流,事件开始时由最具体的元素(文档中嵌套层次最深的那个节点)接收,然后逐级向上传播到较为不具体的节点(文档).例如: <!DOCTYPE html> <htm ...

  3. JavaScript高级程序设计学习笔记--事件

    HTML事件处理程序 <input type="button" value="Click Me" onclick"showMessage()&q ...

  4. Javascript高级编程学习笔记(57)—— 事件(1)事件流

    事件 JS与HTML的交互是通过事件实现的 而事件指的就是:文档或浏览器窗口特定的交互瞬间 可以通过侦听器来预定事件,以便在事件发生时执行相应的代码 这种模式也是设计模式中的观察者模式 事件流 有了事 ...

  5. JS高级程序设计学习笔记之JS事件(1)

    事件流 冒泡 定义:事件开始时由最具体的元素接收,然后逐级上传到较为不具体的节点.(IE9.FF.Chrome.Safari会将事件一直冒泡到window对象.IE5.5及其以下会跳过<html ...

  6. 《JavaScript高级程序设计》笔记:事件(十三)

    事件流 事件冒泡 IE的事件流叫做事件冒泡,即事件开始时由最具体的元素接收,然后逐级向上传播到较为不具体的节点(文档).如下代码: <body> <div id="myDi ...

  7. Javascript高级编程学习笔记(59)—— 事件(3)事件对象

    事件对象 在触发DOM‘事件时,会产生一个事件对象 event 该对象包含着所有与事件有关的信息 所有浏览器都支持 event 对象但是支持的方式有所不同 DOM事件对象 兼容DOM的浏览器会将eve ...

  8. Javascript高级编程学习笔记(58)—— 事件(2)事件处理程序

    事件处理程序 事件处理程序即响应某个事件的函数 事件处理程序以 “on” 开头 如“onclick”,“onload” HTML事件处理程序 某个元素支持的每种事件都可以使用一个与响应的事件处理程序同 ...

  9. Javascript高级编程学习笔记(66)—— 事件(10)变动事件

    变动事件 DOM2级的变动事件,能在DOM中的一部分发生变化时给出提示 变动事件是为XML或HTML DOM 设计的,并不特定于某种语言 DOM2级定义了如下变动事件: DOMSubtreeModif ...

随机推荐

  1. Python virtualenv with Sublime Text 3

    背景介绍 最近喜欢上了Sublime编辑器,刚开始学着用.不过对我这个python狂人来讲,首要问题是需要sublime支持python virtualenv包的导入.所以我就找了google最后找到 ...

  2. Attribute富文本使用方法

    ★★★Attribut富文本★★★ 在UITextView和UILable的使用中很多的时候会用到富文本. UITextView和UILable的区别在于: ★★★★UITextView 当文字大于一 ...

  3. KnockoutJS 3.X API 第七章 其他技术(3) 延迟更新

    .example { display: inline-block; padding: 1em; margin-right: 2em; background: #F6F6EF; } 注意:本文档适用于K ...

  4. VB.NET 创建文件以及文件的读写(创建随机数)

    创建文件 Dim strFile As String = String.Format("C:\ErrorLog.txt", DateTime.Today.ToString(&quo ...

  5. 深入学习jQuery自定义动画

    × 目录 [1]属性对象 [2]可选参数 [3]选项参数 前面的话 很多情况下,前面介绍的jQuery动画的简单效果无法满足用户的各种需求,那么就需要对动画有更多的限制,需要采取一些高级的自定义动画来 ...

  6. Android文件下载之进度检测

    近期因为项目的需要,研究了一下Android文件下载进度显示的功能实现,接下来就和大家一起分享学习一下,希望对广大初学者有帮助. 先上效果图: 上方的蓝色进度条,会根据文件下载量的百分比进行加载,中部 ...

  7. 通过3个Hello World应用来了解ASP.NET 5应用是如何运行的(2)

    对于上面创建的这个Hello World应用来说,程序入口点由应用自身来提供,所以应用本身具有自我执行的能力.从应用托管(Host)的角度来讲,这样的应用同时负责对自身的托管.将应用与托管环境独立起来 ...

  8. 引用类型-Object类型

    创建Object实例的方式有两种. 第一种是使用new操作符后跟Object构造函数 var person = new Object(); person.name = "liao" ...

  9. 手动实现jQuery Tools里面tab功能

    平时开发中用的Javascript类库都是jQuery,用到插件或者第三方类库能从jQuery Tools里面找到,基本不用其他的.当然有时同事喜欢使用jQuery UI里面的插件.并且jQuery ...

  10. 在ASP.NET Web API项目中使用Hangfire实现后台任务处理

    当前项目中有这样一个需求:由前端用户的一个操作,需要触发到不同设备的消息推送.由于推送这个具体功能,我们采用了第三方的服务.而这个服务调用有时候可能会有延时,为此,我们希望将消息推送与用户前端操作实现 ...