事件流之事件冒泡与事件捕获<JavaScript高级程序设计>学习笔记

1.事件流

浏览器开发团队遇到一个很有意思问题:页面的那一部分会拥有特定的事件?

对于理解这个问题您可以想象画在一张纸上的一组同心圆,如果你把手指放在圆心上,那么你的手指指向的其实不是一个圆,而是纸上所有的圆。放到实际页面中就是,你点击一个按钮,而是纸上所有的圆。

<栗子:现实生活中的声波、水波>

事件流:从页面中接收事件的顺序,通俗说:用户操作DOM的一系列行为交互.

2.事件冒泡

事件冒泡:IE的事件流叫事件冒泡,即事件开始由最具体的元素(文档中嵌套层次最深的那个元素)接收,然后逐级向上传播到较为不具体的元素(html)

栗子:点击页面中的button元素,那么这个事件会按照如下顺序传播<Chrome浏览器>

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Event Bubbling Example</title>
 6     <script type="text/javascript">
 7         window.onload=function(){
 8             var oBtn=document.getElementById(‘button‘);
 9             oBtn.onclick = function() {
10               console.log(‘1. You click button‘);
11             };
12             document.body.onclick = function() {
13               console.log(‘2. You click body‘);
14             };
15             document.onclick = function() {
16               console.log(‘3. You click document‘);
17             };
18             window.onclick = function() {
19               console.log(‘4. You click window‘);
20             };
21         }
22     </script>
23 </head>
24 <body>
25     <div id="box">
26         <input type="button" value="Click Me" id="button" />
27     </div>
28 </body>
29 </html>

View Demo

3.事件捕获
   a.事件捕获:即事件开始由最不具体的元素接收,然后逐级向下传播到为最具体的目标元素

为了模拟实现事件捕获得了解一下addEventListener

b.addEventListener 为文档节点、document、window 或 XMLHttpRequest 注册事件处理程序

 语法

  target.addEventListener(type, listener, useCapture);

  • target 文档节点、document、window 或 XMLHttpRequest。
  • type 字符串,事件名称,不含“on”,比如“click”、“mouseover”、“keydown”等。
  • listener 实现了 EventListener 接口或者是 JavaScript 中的函数。
  • useCapture 是否使用捕捉,看了后面的事件流一节后就明白了,一般用 false事件冒泡、true事件捕获

代码如下:

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Event Bubbling Example</title>
 6     <script type="text/javascript">
 7         window.onload=function(){
 8             var oBtn=document.getElementById(‘button‘);
 9             oBtn.addEventListener(‘click‘, function(){
10                 console.log(‘1. You click button‘);
11             },true);
12             document.body.addEventListener(‘click‘, function(){
13                 console.log(‘1. You click body‘);
14             },true);
15             document.addEventListener(‘click‘, function(){
16                 console.log(‘1. You click document‘);
17             },true);
18             window.addEventListener(‘click‘, function(){
19                 console.log(‘1. You click window‘);
20             },true);
21         }
22     </script>
23 </head>
24 <body>
25     <div id="box">
26         <input type="button" value="Click Me" id="button" />
27     </div>
28 </body>
29 </html>

View Demo

综上所述:事件捕获、事件目标、事件冒泡如下图所示:

时间: 2024-10-10 04:11:40

事件流之事件冒泡与事件捕获<JavaScript高级程序设计>学习笔记的相关文章

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

事件流 冒泡 定义:事件开始时由最具体的元素接收,然后逐级上传到较为不具体的节点.(IE9.FF.Chrome.Safari会将事件一直冒泡到window对象.IE5.5及其以下会跳过<html>元素,直接从body跳到document).若发生事件的节点元素并没有绑定该事件,则这个动作会向上冒泡,直到被执行,一直冒泡到window对象. 阻止冒泡:①使用stoppropagation() ②在函数中进行一次判断,if(event.target==event.current.target){f

JS DOM基础 事件概述 事件流 事件处理方法 添加监听器 事件类型 事件对象 事件委托

一.事件概述 事件是什么? 在我们的生活中,都会接触到事件这样一个概念,它通常通过描述发生这件事的时间.地点.人物,发生了什么来进行概括. 同样的在javascript也有这样的一个的东西------事件. 页面上发生的事件:鼠标移动.点击.滚动等等. 事件描述了页面上发生的事情,通常它有以下三个要素组成: 事件源:触发事件的元素 事件类型:事件的触发方式(例如鼠标点击或键盘点击) 事件处理程序(事件监听器):事件触发后要执行的代码(函数形式) Javascript 使我们可以动态的去操作一个页

javascript高级程序设计 第十三章--事件

javascript高级程序设计 第十三章--事件js与HTML的交互就是通过事件实现的,事件就是文档或浏览器窗口中发生的一些特定的交互瞬间. 事件流:事件流描述的是从页面中接收事件的顺序,IE的是事件冒泡流,Netscape的是事件捕获流,这个两个是完全相反的事件流概念. 事件冒泡:由最具体的元素接收,然后逐级向上传播到更高级的节点,即事件沿DOM树向上传播,直到document对象. 事件捕获:不大具体的节点应该更早接收到事件,相当于沿DOM节点树向下级传播直到事件的实际目标,在浏览器中,是

《JAVASCRIPT高级程序设计》事件处理程序和事件类型

一.事件流 谈到事件,首要要理解事件流的概念:事件流是指从页面接受事件的顺序:“DOM2级事件”规定事件流包括三个阶段:事件捕获阶段.处于目标阶段和事件冒泡阶段.目前大部分的浏览器的事件流是事件冒泡,即最开始由具体的元素接收事件,然后逐级传播到不具体的节点,直到传播到windows对象:另一种事件流是事件捕获,目前使用得比较少,是指文档对象先接收到事件,然后逐级向下,一直传播到事件的实际目标. 二.事件处理程序 1.两种表示方式 <input type="button" valu

web前端之JavaScript高级程序设计六:事件

web前端之JavaScript高级程序设计六:事件 JavaScript 与 HTML 之间的交互是通过事件实现的.事件,就是文档或浏览器窗口中发生的一些特定的交互瞬间.可以使用侦听器(或处理程序)来预订事件,以便事件发生时执行相应的代码.这种在传统软件工程中被称为观察员模式的模型,支持页面的行为(JavaScript 代码)与页面的外观(HTML 和 CSS 代码)之间的松散耦合. 事件流: 事件流描述的是从页面中接收事件的顺序.但有意思的是, IE 和 Netscape 开发团队居然提出了

[JavaScript高级程序设计]之事件篇01

事件流 IE提出的是事件冒泡流,而Netscape提出的是事件捕获流. 事件冒泡流即当事件开始时,由具体的节点接收,然后逐级向上传播到较为不具体的节点. 事件捕获流即由不具体的节点逐级向下传播到具体的节点. 事件捕获的起点和事件冒泡的中终点都是window对象.低版本IE除外. DOM事件流DOM2级事件分为三个阶段:捕获阶段.处于目标阶段.冒泡阶段. 事件处理 DOM0级事件处理将一个函数赋值给一个事件处理程序的属性,回调中的this为当前元素,只能绑定一个回调,只执行最后一次绑定的回调 1

《javascript高级程序设计》 touch事件的一个小错误

最近一段时候都在拜读尼古拉斯大神的<javascript高级程序设计>,真的是一本好书,通俗易懂,条理比<javascript权威指南>好理解一些,当然<javascript权威指南>有权威指南的优点,不闲话了,入正题. 看技术书我通常都喜欢把书上的代码敲一遍,虽然很花时间,但只有动手敲的时候,脑中才有各种乱七八糟的想法蹦出来,为什么不能按照自己想的写,为什么书上的代码更好更优雅,还有没有别的办法去解决眼前的问题,想的多了,理解就很深,当然最重要的就是记得牢了.即使很浅

事件对象、事件流、关于冒泡、默认行为

事件对象: 在触发事件的时候,会产生一个事件对象event,这个对象中包含了与事件相关的信息. 例如:在触发鼠标双击时,是触发了这几件事  onkeydown+onkeyup+onclick+onkeydown+onkeyup+onclick 事件流: 当HTML元素产生一个事件时,这个事件会在元素节点与根节点之后的路径传播,路径所经过的节点都会接收到这个事件,这个传播过程称为DOM事件流. DOM事件流分为冒泡事件流和捕获事件流. 事件冒泡: 当一个元素的事件被触发时,同样的事件将会在该元素的

《JavaScript高级程序设计》—— 事件流

(1) 事件冒泡 IE 的事件流叫做事件冒泡(event bubbling),即事件开始时由最具体的元素(文档中嵌套层次最深的那个节点)接收,然后逐级向上传播到较为不具体的节点(文档). (2) 事件捕获 事件捕获的思想是不太具体的节点应该更早接收到事件,而最具体的节点应该最后接收到事件.事件捕获的用意在于在事件到达预定目标之前捕获它. (3) DOM事件流 " DOM2级事件"规定的事件流包括三个阶段:事件捕获阶段.处于目标阶段和事件冒泡阶段.首先发生的是事件捕获,为截获事件提供了机