事件流：

事件流: 描述的是从页面中接收事件的顺序 也可以理解为事件在页面中传播的顺序；

事件: 就是用户或浏览器自身执行的某种动作 例如 click(点击) load(加载) mouseover(鼠标悬停)

事件处理程序: 响应某个事件的函数就叫事件处理程序(或事件侦听器)

下面所示例子注册事件的方式均使用DOM2级事件定义的事件处理程序进行注册。DOM2级事件定义可两个方法，用于处理指定和删除事件处理程序的操作:addEventListener()和removeEventListener()，所有的DOM节点都包含这两个方法，并且它们都接收三个参数:处理事件的方式 作为事件处理程序的函数 和一个bool值。当这个Bool值为true时，表示在捕获阶段调用事件处理程序，如果为false 表示在冒泡阶段调用事件处理程序。

事件的作用范围讨论

示例1

<html>

    <head>

        <meta charset="UTF-8">

        <title></title>

        <style type="text/css">

            #wrap {

                width: 200px;

                height: 200px;

                background: orange;

            }

            #outer {

                position: relative;

                top: 50px;

                left: 50px;

                width: 100px;

                height: 100px;

                background: #eeddff;

            }

            #liner {

                position: relative;

                top: 25px;

                left: 25px;

                width: 50px;

                height: 50px;

                background: #44ddff;

            }

        </style>

    </head>

    <body>

        <div id="wrap">

            <div id="outer">

                <div id="liner">

                </div>

            </div>

        </div>

        <script>

            var wrap = document.getElementById("wrap");

            wrap.addEventListener("click",function(){

                alert("1314");

            },false);

        </script>

    </body>

</html>

output

问题1:容器元素wrap注册了事件，那么此事件的作用范围是什么？

思考1:根据上面的例子 当点击橘黄色块中(包括被子元素覆盖的部分)任何一部分时，都会弹出1314，点击橘黄色块外面的部分没有任何反应，那么，我们可以得到这样的结论，元素注册事件的作用范围为元素自身在页面中所占空间的大小，但是真的是这样吗？下面我们来做个实验：

我们可以更改上面代码中的CSS代码 改过后为这样:

<style type="text/css">

    #wrap {

        width: 200px;

        height: 200px;

        background: orange;

    }

    #outer {

        position: relative;

        top: 50px;

        left: 50px;

        width: 100px;

        height: 100px;

        background: #eeddff;

    }

    /*liner中的top被修改*/

    #liner {

        position: relative;

        top: 152px;

        left: 25px;

        width: 50px;

        height: 50px;

        background: #44ddff;

    }

</style>

此时HTML页面是这样的：

结论1:当橘黄色块外的浅蓝色部分被点击的时候，同样弹出了1314，而浅蓝色部分是嵌套在wrap元素之内的元素，故可以得出结论：当元素注册了事件，此事件的作用范围：1元素自己所占页面空间的加嵌套元素所占空间的范围(若嵌套元素覆盖在容器元素上，则此事件的作用范围为容器元素自身所占空间的大小)

事件的执行顺序的讨论

问题2 根据上面的示例 那么这里大家可以在思考一个问题，若容器元素wrap以及嵌套元素outer liner 都注册了click事件，根据1得出的结论 那么嵌套在最里层的元素liner所占页面的空间范围内 一共有三个click事件作用在其上，那么当在liner元素的作用范围内点击页面时，3个事件的执行顺序会是什么样的呢？

要解决上面我们提出的问题 这就涉及到了两种处理事件流的不同的机制，事件冒泡 和 事件捕获

事件冒泡

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

示例2:

将参数设置为false 让元素在冒泡阶段调用事件处理程序：

我们将CSS代码还改为最开始的时候 ，并修改js代码如下：

<script>

    var wrap = document.getElementById("wrap");

    var outer = document.getElementById("outer");

    var liner = document.getElementById("liner");

    wrap.addEventListener("click",function(){

        alert("1314");

    },false);

    outer.addEventListener("click",function() {

            alert("1000");

    },false);

    liner.addEventListener("click",function() {

        alert("888");

    },false);

</script

当我们只点击橘黄色块的时候 只提示1314 点击淡紫色块的时候 会先弹出1000 在弹出1314 当点击淡蓝色的时候 会依次弹出888， 1000 ，1314 可见冒泡事件是由最具体的元素先接受然后一级一级向上传递（向上传播到不具体的元素）

结论2:

在冒泡阶段调用事件处理程序，上面问题的结果是这样的：当点击页面中心浅蓝色的部分时，依次弹出888，1000，1314,因此当容器元素以及嵌套元素都在冒泡阶段调用处理程序时，事件按照冒泡的顺序执行事件处理程序。

事件捕获

Netscape团队提出的另外一种事件流叫做事件捕获，事件捕获的思想是 不太具体的节点应该更早的接收到事件，而最具体的节点应该最后接收到事件。

我们将上面的js代码在做一下修改，代码如下，可以看到只是将addEventListener()的第三个参数改为了true

<script>

    var wrap = document.getElementById("wrap");

    var outer = document.getElementById("outer");

    var liner = document.getElementById("liner");

    wrap.addEventListener("click",function(){

        alert("1314");

    },true);

    outer.addEventListener("click",function() {

            alert("1000");

    },true);

    liner.addEventListener("click",function() {

        alert("888");

    },true);

</script

这次 我们再点击浅蓝色的块的时候 会看到先弹出的是 1314 然后是 1000 最后才是自己的事件 弹出 888 是和事件冒泡相反的顺序。是事件捕获的思想

结论三:

在捕获阶段调用事件处理程序，上面问题的结果是这样的：当点击页面中心浅蓝色的部分时，先是弹出wrap，接着弹出outer，最后弹出liner。因此当容器元素及其嵌套元素都在捕获阶段调用事件处理程序时：事件按事件捕获的顺序执行事件处理程序。

问题3:根据思考1，思考2得出的结果，接着又有一个问题我认为需要思考，当同一个元素即在冒泡阶段注册了事件，又在捕获阶段注册了同一事件，那么当事件被触发时，事件的执行顺序又会是如何的？

要解决问题三 就涉及到了DOM的事件流

DOM 事件流

DOM2级事件规定的事件流包括三个阶段:事件捕获阶段-->处于目标阶段-->事件冒泡阶段。首先发生的是事件捕获阶段 为截获事件提供了机会，然后是实际目标接收事件，最后一个阶段是冒泡阶段，以下图片来自w3c

示例4:

var wrap = document.getElementById('wrap');

var outet = document.getElementById('outer');

var liner = document.getElementById('liner');

wrap.addEventListener('click',function(){

  alert('789');

},false);

outer.addEventListener('click',function(){

  alert('456');

},false);

inner.addEventListener('click',function(){

  alert('123');

},false);

wrap.addEventListener('click',function(){

  alert('wrap');

},true);

outer.addEventListener('click',function(){

  alert('outer');

},true);

liner.addEventListener('click',function(){

  alert('inner');

},true);

结论4:当点击页面中心浅蓝色部分的时候，先从最不具体的节点捕获事件，先弹出wrap,接着弹出outer。接着处于目标阶段，先弹出888，再弹出liner。紧接着，事件处于冒泡阶段，先弹出1000，再弹出1314。因此我们可以得出结论，当容器元素及嵌套元素，即在捕获阶段又在冒泡阶段调用事件处理程序时：事件按DOM事件流的顺序执行事件处理程序，且当事件处于目标阶段时，事件调用顺序决定于绑定事件的书写顺序，按上面的例子为，先调用冒泡阶段的事件处理程序，再调用捕获阶段的事件处理程序

HTML 学习笔记 JavaScript（事件）的更多相关文章

  1. 学习笔记---Javascript事件Event、IE浏览器下的拖拽效果

    学习笔记---Javascript事件Event.IE浏览器下的拖拽效果     1. 关于event常用属性有returnValue(是否允许事件处理继续进行, false为停止继续操作).srcE ...

  2. [JS学习笔记]Javascript事件阶段：捕获、目标、冒泡

    当你在浏览器上点击一个按钮时,点击的事件不仅仅发生在按钮上,同时点击的还有这个按钮的容器元素,甚至也点击了整个页面. 事件流 事件流描述了从页面接收事件的顺序,但在浏览器发展到第四代时,浏览器开发团队 ...

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

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

  4. vue学习笔记(四)事件处理器

    前言 在上一章vue学习笔记(三)class和style绑定的内容中,我们学习了如何在vue中绑定class和style,介绍了常用的绑定方法,class的数组绑定和对象绑定以及style的数组绑定和 ...

  5. HTML 学习笔记 JavaScript（面向对象）

    现在让我们继续跟着大神的脚步前进 学习一下JavaScript中的面向对象的思想,其实作为一个iOS开发者,对面向对象还是比较熟悉的,但是昨晚看了一下Js中的面向对象,妈蛋 一脸萌比啊.还好有大神.让 ...

  6. Caliburn.Micro学习笔记(三)----事件聚合IEventAggregator和 Ihandle<T>

    Caliburn.Micro学习笔记目录 今天 说一下Caliburn.Micro的IEventAggregator和IHandle<T>分成两篇去讲这一篇写一个简单的例子 看一它的的实现 ...

  7. iOS学习笔记--触摸事件

    最近空闲时间在学习iOS相关知识,几周没有更新文章了,今天总结下这些天的学习内容,也整理下iOS的学习笔记,以便以后查阅翻看- iOS中的事件可以分为3大类型: 触摸事件 加速计事件 远程控制事件 响 ...

  8. JAVAscript学习笔记 js事件 第一节 （原创） 参考js使用表

    <!DOCTYPE html> <html lang="en" onUnload="ud()"> <head> <me ...

  9. javascript学习笔记 --event事件

    事件源(按钮.窗口)->事件对象->事件处理程序 事件源可以是网页元素浏览器窗口事件处理程序一般是一个函数.       一个事件可以被多个函数处理       事件的总类       鼠 ...

随机推荐

  1. bootstrap的一些资源

    http://www.cnblogs.com/landeanfen/p/5461849.html 总结了时间,加载,自动增加图片选择,等bootstap控件 http://www.cnblogs.co ...

  2. <转>最新版SDWebImage的使用

    我之前写过一篇博客,介绍缓存处理的三种方式,其中最难,最麻烦,最占内存资源的还是图片缓存,最近做的项目有大量的图片处理,还是采用了SDWebImage来处理,但是发现之前封装好的代码报错了.研究发现, ...

  3. subversion SVN

    subversion(简称svn)是近年来崛起的版本管理软件系统,是cvs的接班人.目前,绝大多数开源软件都使用svn作为代码版本管理软件. Subversion是一个版本控制系统,相对于的RCS.C ...

  4. 【代码笔记】iOS-将图片处理成圆的

    一,效果图. 二,工程图. 三,代码. ViewController.m - (void)viewDidLoad { [super viewDidLoad]; // Do any additional ...

  5. 安装和使用cocoapods

    第一步:查看自己电脑的Ruby环境:gem sources -l 1.如果已经是taobao镜像了[https://ruby.taobao.org/],此时不需要环境的修改了,直接进入第二步 2.(1 ...

  6. new ActiveXObject("Scripting.FileSystemObject") 时抛出异常 .

    使用JScript读写本地文件时,会使用Scripting.FileSystemObject控件. IE默认是不允许运行这类“未标记为安全执行脚本的ActiveX控件”的. 因此执行下行代码时: fs ...

  7. WPF学习之路（十一）布局（续）

    布局实际上是一个Slot模型,其中每个父对象分配给子对象一个Slot,子对象可以自由占用Slot中的空间,通过Margin\VerticalAlignment\HorizontalAlignment控 ...

  8. 【译】Java中的对象序列化

    前言 好久没翻译simple java了,睡前来一篇. 译文链接: http://www.programcreek.com/2014/01/java-serialization/ 什么是对象序列化 在 ...

  9. 每日Scrum（5）

    进入冲刺第五天,软件的界面设计成为主打,收集学校的很多美图是我们组的任务: 问题在于软件已很难有很大的改进,大方向也都是变不了的

  10. SQL动态列查询

    数据库中为了实现表格数据的自由设置,我们经常设计纵表,或者列定义的表(如下KeyValue),定义一个列超级多的表中每个字段的意义. 但是在设计时简单的东西却很容易被人们忘记,如下一个简单但是很松散的 ...