粗浅的总结下事件流

什么是事件流?以及为什么要有事件流?

简单的说,事件流就是,确认触发条件满足时,事件对应函数的调用顺序。举个例子,鼠标光标在某个按钮上点击了,按钮又绑定了mousedown事件,那么其对应的函数就会调用。而其实,光标落下的位置也在document、window的范围内,或许还可能在其他元素的和模型内。如果这些元素也都绑定了mousedown事件,那么哪个元素的mousedown事件对应的函数先调用呢?这就需要确认一个发生的顺序问题。

具体的说,事件流分为三个阶段,即捕获阶段、目标(处理)阶段、冒泡阶段。网上随便找了一张示意图,如下:

其实这张图以及网上很多说法(比如百度百科DOM事件流)都不是很严谨,漏掉了window对象。事件流应该是从window开始,在window对象结束(如果捕获阶段和冒泡阶段,window都绑定了事件的话)。估计是window对象通常只在冒泡阶段绑定load事件吧,不谈也没什么影响。

一个演示事件流的例子

下图中,在鼠标单击金黄色span区域时,控制台对应打印出日志。

源代码在这里:

 1 <!DOCTYPE html>
 2 <html id="html">
 3     <head>
 4         <meta charset="UTF-8">
 5         <title></title>
 6         <style>
 7             div{
 8                 width: 200px;
 9                 height: 200px;
10                 font-size: 30px;
11                 color: #fff;
12                 background: green;
13             }
14             span{
15                 display: block;
16                 width: 100px;
17                 height: 100px;
18                 background: goldenrod;
19                 color: #fff;
20                 font-size: 30px;
21             }
22             body{
23                 border: 1px solid #000;
24             }
25         </style>
26         <script>
27
28             window.onload=function(){
29                 var div=document.getElementById("div");
30                 var span=document.getElementById("span");
31                 var html=document.getElementById("html");
32                 var body=document.getElementById("body");
33                 var head=document.getElementById("head");
34
35                 body.addEventListener(‘click‘,function(){console.log(‘body冒泡‘)},false);
36                 html.addEventListener(‘click‘,function(){console.log(‘html冒泡‘)},false);
37                 window.addEventListener(‘click‘,function(){console.log(‘window冒泡‘)},false);
38                 document.addEventListener(‘click‘,function(){console.log(‘document冒泡‘)},false);
39                 div.addEventListener(‘click‘,function(){console.log(‘div冒泡‘)},false);
40                 span.addEventListener(‘click‘,function(){console.log(‘span冒泡‘)},false);
41                 span.addEventListener(‘click‘,function(){console.log(‘span捕获‘)},true);
42                 document.addEventListener(‘click‘,function(){console.log(‘document捕获‘)},true);
43                 window.addEventListener(‘click‘,function(){console.log(‘window捕获‘)},true);
44                 html.addEventListener(‘click‘,function(){console.log(‘html捕获‘)},true);
45                 body.addEventListener(‘click‘,function(){console.log(‘body捕获‘)},true);
46                 div.addEventListener(‘click‘,function(){console.log(‘div捕获‘)},true);
47             };
48         </script>
49     </head>
50     <body id="body">
51         <div id="div">div
52             <span id="span">span</span>
53         </div>
54     </body>
55 </html>

结合图片和代码,可以发现两个问题:

1、代码中故意将打印带有“冒泡”字样的语句写在了前面,而且也没有按“window捕获->document捕获->html捕获->body捕获->div捕获->span捕获->span冒泡->div冒泡->body冒泡->html冒泡->document冒泡->window冒泡”这样的顺序,但是控制台中打印的日志基本上与事件流的顺序一致。

2、第二个问题,也就是控制台中打印的日志与事件流的顺序不一致的地方,为什么“span冒泡”在“span捕获”前面呢?因为,触发的是span绑定的事件,那么span绑定的事件就在目标阶段触发。触发顺按照代码中书写顺序来。本例中,即

span.addEventListener(‘click‘,function(){console.log(‘span冒泡‘)},false);

span.addEventListener(‘click‘,function(){console.log(‘span捕获‘)},true); 前面。

补充说明:

addEventListener绑定事件语法: 对象.addEventListener(事件名称,事件绑定函数,布尔值)

布尔值取值说明:
* true 事件是在捕获的阶段发生的
* false 事件是在冒泡的阶段发生的(缺省值)


本作品采用知识共享署名 4.0 国际许可协议进行许可。

时间: 2024-10-04 07:09:32

粗浅的总结下事件流的相关文章

JS事件流

事件流:当页面元素触发事件的时候,该元素的容器以及整个页面都会按照特定顺序响应该元素的触发事件,事件传播的顺序叫做事件流. 一.事件流的分类 1.冒泡型事件(所有的浏览器都支持 w3c标准) 由明确的事件源到最不确定的事件源依次向上触发. 2.捕获型事件(IE不支持 w3c标准 火狐) 不确定的事件源到明确的事件源依次向下触发. addEventListener(事件,处理函数,false) addEventListener(事件,处理函数,true) 二.阻止事件流 IE: 事件对象.canc

浅谈js之事件流

这些日子我就把js的相关知识梳理一下,今天来说javascript中的事件流. 1.事件流 事件流:从页面中接收事件的顺序.也就是说当一个事件产生时,这个事件的传播过程,就是事件流. IE的事件流 IE中的事件流叫事件冒泡:事件冒泡:事件开始时由最具体的元素接收,然后逐级向上传播到较为不具体的节点(文档).对于html来说,就是当一个元素产生了一个事件,它会把这个事件传递给它的父元素,父元素接收到了之后,还要继续传递给它的上一级元素,就这样一直传播到document对象(亲测现在的浏览器到win

理解JavaScript中的事件流

原文地址:http://my.oschina.net/sevenhdu/blog/332014 目录[-] 事件冒泡 事件捕获 DOM事件流 当浏览器发展到第四代时(IE4和Netscape Communicator 4),浏览器团队遇到一个很有意思的问题:页面的哪一部分会拥有特定的事件?想象下在一张纸上有一组同心圆,如果你把手指放在圆心上,那么你的手指指向的不是一个圆,而是一组圆.两家公司的开发团队在看待浏览器事件方面还是一致的.如果你单击了某个按钮,那么同时你也单击了按钮的容器元素,甚至整个

三言两语之js事件、事件流以及target、currentTarget、this那些事

厉害了我的哥——你是如此简单我却将你给遗忘   放假前再看某文档,里边提到两个我既熟悉又陌生的概念target.currentTarget,说他熟悉我曾经看到过这两个事件对象的异同处,说他陌生吧?很不巧.正要运用了,吾才发现吾压根就没记住...其实要讲清楚target.currentTarget,我们就不得不说一下事件流这个概念,而要言明事件流,我们也要晓得一下神马是事件以及一些周边生态概念,这三个概念是必须放在一块说,我们才能对能对这部分的知识有很好的理解滴,网上信息太零散,于是乎就有了这篇算

addEventListener及事件流

addEventListener 定义和用法 addEventListener 用于向指定元素添加事件句柄(又称事件处理函数) 语法 element.addEventListener(event, function, useCapture) element   文档节点,duocument,window. event      必须有.是一个字符串,指定事件名(一般不使用“on前缀”,例如“click,mouseover”). function  必须有.指定要事件触发时执行的函数(可以是函数,

javascript事件流讲解和实例应用

当页面元素触发事件的时候,该元素的容器以及整个页面都会按照特定  顺序响应该元素的触发事件,事件传播的顺序叫做事件流. 一.事件流的分类 1.冒泡型事件(所有的浏览器都支持 w3c标准)              由明确的事件源到最不确定的事件源依次向上触发,有内向外. 2.捕获型事件(IE不支持 w3c标准 火狐)      不确定的事件源到明确的事件源依次向下触发,由外向内.       addEventListener(事件,处理函数,false)       addEventListen

JavaScript的事件对象_事件流

事件流事件流是描述的从页面接受事件的顺序,当几个都具有事件的元素层叠在一起的时候,那么你点击其中一个元素,并不是只有当前被点击的元素会触发事件,而层叠在你点击范围的所有元素都会触发事件.事件流包括两种模式:冒泡和捕获. 事件冒泡,是从里往外逐个触发.事件捕获,是从外往里逐个触发.那么现代的浏览器默认情况下都是冒泡模型,而捕获模式则是早期的 Netscape 默认情况.而现在的浏览器要使用 DOM2 级模型的事件绑定机制才能手动定义事件流模式. <script type="text/java

事件流,事件捕获与事件冒泡-基础知识总结------彭记(018)

事件流: -事件流包括三个阶段-事件捕获阶段.处于目标阶段和事件冒泡阶段. -首先发生的是事件捕获,为截获事件提供了机会,然后是实际的目标接收到事件,最后一个阶段是冒泡阶段,可以在这个阶段对事件做出响应. 事件冒泡: -事件开始时由最具体的元素接收,然后逐级向上传播到较为不具体的节点(文档). <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8">

JavaScript 中的事件流和事件处理程序(读书笔记思维导图)

JavaScript 程序采用了异步事件驱动编程模型.在这种程序设计风格下,当文档.浏览器.元素或与之相关的对象发生某些有趣的事情时,Web 浏览器就会产生事件(event). JavaScript 与 HTML 之间的交互是通过事件实现的.事件就是文档或浏览器窗口中发生的一些特定的交互瞬间,或者说事件就是 Web 浏览器通知应用程序发生了什么事情.可以使用侦听器(或处理程序)来预订事件,以便事件发生时执行相应的代码. 以下是<JavaScript高级程序设计>中事件流和事件处理程序的总结: