看懂此文，不再困惑于 JS 中的事件设计

原文出处： aitangyong

抽空学习了下javascript和jquery的事件设计，收获颇大，总结此贴，和大家分享。

(一)事件绑定的几种方式

javascript给DOM绑定事件处理函数总的来说有2种方式：在html文档中绑定、在js代码中绑定。下面的方式1、方式2属于在html中绑定事件，方式3、方式4和方式5属于在js代码中绑定事件，其中方法5是最推荐的做法。

方式1：

HTML的DOM元素支持onclick、onblur等以on开头属性，我们可以直接在这些属性值中编写javascript代码。当点击div的时候，下面的代码会弹出div的ID：

这种做法很显然不好，因为代码都是放在字符串里的，不能格式化和排版，当代码很多的时候很难看懂。这里有一点值得说明：onclick属性中的this代表的是当前被点击的DOM对象，所以我们可以通过this.id获取DOM元素的id属性值。

方式2：

当代码比较多的时候，我们可以在onclick等属性中指定函数名。

跟上面的做法相比，这种做法略好一些。值得一提的是：事件处理函数中的this代表的是window对象，所以我们在onclick属性值中，通过this将dom对象作为参数传递。

 <script>

     function buttonHandler(thisDom)

     {

         alert(this.id);//undefined

         alert(thisDom.id);//outestA

         return false;

     }

 </script>

 <div id="outestA" onclick="return buttonHandler(this);"></div>

方式3：在JS代码中通过dom元素的onclick等属性

 var dom = document.getElementById("outestA");

 dom.onclick = function(){alert("1=" + this.id);};

 dom.onclick = function(){alert("2=" + this.id);};

这种做法this代表当前的DOM对象。还有一点：这种做法只能绑定一个事件处理函数，后面的会覆盖前面的。

方式4：IE下使用attachEvent/detachEvent函数进行事件绑定和取消。

attachEvent/detachEvent兼容性不好，IE6~IE11都支持该函数，但是FF和Chrome浏览器都不支持该方法。而且attachEvent/detachEvent不是W3C标准的做法，所以不推荐使用。在IE浏览器下，attachEvent有以下特点。

a) 事件处理函数中this代表的是window对象，不是dom对象。

 var dom = document.getElementById("outestA");

 dom.attachEvent('onclick',a);  

 function a()

 {

     alert(this.id);//undefined

 }

b) 同一个事件处理函数只能绑定一次。

 var dom = document.getElementById("outestA");

 dom.attachEvent('onclick',a);

 dom.attachEvent('onclick',a);

 function a()

 {

     alert(this.id);

 }

虽然使用attachEvent绑定了2次，但是函数a只会调用一次。

c)不同的函数对象，可以重复绑定，不会覆盖。

 var dom = document.getElementById("outestA");

 dom.attachEvent('onclick',function(){alert(1);});

 dom.attachEvent('onclick',function(){alert(1);});  

 // 当outestA的click事件发生时,会弹出2个对话框

匿名函数和匿名函数是互相不相同的，即使代码完全一样。所以如果我们想用detachEvent取消attachEvent绑定的事件处理函数，那么绑定事件的时候不能使用匿名函数，必须要将事件处事函数单独写成一个函数，否则无法取消。

方式5：使用W3C标准的addEventListener和removeEventListener。

这2个函数是W3C标准规定的，FF和Chrome浏览器都支持，IE6/IE7/IE8都不支持这2个函数。不过从IE9开始就支持了这2个标准的API。

 // type:事件类型,不含"on",比如"click"、"mouseover"、"keydown";

 // 而attachEvent的事件名称,含含"on",比如"onclick"、"onmouseover"、"onkeydown";

 // listener:事件处理函数

 // useCapture是事件冒泡,还是事件捕获,默认false,代表事件冒泡类型

 addEventListener(type, listener, useCapture);

a) 事件处理函数中this代表的是dom对象，不是window，这个特性与attachEvent不同。

 var dom = document.getElementById("outestA");

 dom.addEventListener('click', a, false);  

 function a()

 {

     alert(this.id);//outestA

 }

b) 同一个事件处理函数可以绑定2次,一次用于事件捕获，一次用于事件冒泡。

 var dom = document.getElementById("outestA");

 dom.addEventListener('click', a, false);

 dom.addEventListener('click', a, true);  

 function a()

 {

     alert(this.id);//outestA

 }

 // 当点击outestA的时候,函数a会调用2次

如果绑定的是同一个事件处理函数，并且都是事件冒泡类型或者事件捕获类型，那么只能绑定一次。

 var dom = document.getElementById("outestA");

 dom.addEventListener('click', a, false);

 dom.addEventListener('click', a, false);  

 function a()

 {

     alert(this.id);//outestA

 }

 // 当点击outestA的时候,函数a只会调用1次

c) 不同的事件处理函数可以重复绑定，这个特性与attachEvent一致。

(二)事件处理函数的执行顺序

方式1、方式2和方式3都不能实现事件的重复绑定，所以自然也就不存在执行顺序的问题。方式4和方式5可以重复绑定特性，所以需要了解下执行顺序的问题。如果你写出依赖于执行顺序的代码，可以断定你的设计存在问题。所以下面的顺序问题，仅作为兴趣探讨，没有什么实际意义。直接上结论：addEventListener和attachEvent表现一致,如果给同一个事件绑定多个处理函数，先绑定的先执行。下面的代码我在IE11、FF17和Chrome39都测试过。

 <script>

     window.onload = function(){

     <span style="white-space:pre">    </span>var outA = document.getElementById("outA");

         outA.addEventListener('click',function(){alert(1);},false);

         outA.addEventListener('click',function(){alert(2);},true);

         outA.addEventListener('click',function(){alert(3);},true);

         outA.addEventListener('click',function(){alert(4);},true);

     };

 </script>

 <body>

     <div id="outA" style="width:400px; height:400px; background:#CDC9C9;position:relative;">

     </div>

 </body>

当点击outA的时候，会依次打印出1、2、3、4。这里特别需要注意：我们给outA绑定了多个onclick事件处理函数，也是直接点击outA触发的事件，所以不涉及事件冒泡和事件捕获的问题，即addEventListener的第三个参数在这种场景下，没有什么用处。如果是通过事件冒泡或者是事件捕获触发outA的click事件，那么函数的执行顺序会有变化。

(三) 事件冒泡和事件捕获

事件冒泡和事件捕获很好理解，只不过是对同一件事情的不同看法，只不过这2种看法都很有道理。

我们知道HTML中的元素是可以嵌套的，形成类似于树的层次关系。比如下面的代码：

 <div id="outA" style="width:400px; height:400px; background:#CDC9C9;position:relative;">

     <div id="outB" style="height:200; background:#0000ff;top:100px;position:relative;">

         <div id="outC" style="height:100px; background:#FFB90F;top:50px;position:relative;"></div>

     </div>

 </div>

如果点击了最内侧的outC，那么外侧的outB和outC算不算被点击了呢？很显然算，不然就没有必要区分事件冒泡和事件捕获了，这一点各个浏览器厂家也没有什么疑义。假如outA、outB、outC都注册了click类型事件处理函数，当点击outC的时候，触发顺序是A–>B–>C，还是C–>B–>A呢？如果浏览器采用的是事件冒泡，那么触发顺序是C–>B–>A，由内而外，像气泡一样，从水底浮向水面；如果采用的是事件捕获，那么触发顺序是A–>B–>C，从上到下，像石头一样，从水面落入水底。

事件冒泡见下图：

事件捕获见下图：

一般来说事件冒泡机制，用的更多一些，所以在IE8以及之前，IE只支持事件冒泡。IE9+/FF/Chrome这2种模型都支持，可以通过addEventListener((type, listener, useCapture)的useCapture来设定，useCapture=false代表着事件冒泡，useCapture=true代表着采用事件捕获。

<script>

    window.onload = function(){

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

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

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

        // 使用事件冒泡

        outA.addEventListener('click',function(){alert(1);},false);

        outB.addEventListener('click',function(){alert(2);},false);

        outC.addEventListener('click',function(){alert(3);},false);

    };

</script>

<body>

    <div id="outA" style="width:400px; height:400px; background:#CDC9C9;position:relative;">

        <div id="outB" style="height:200; background:#0000ff;top:100px;position:relative;">

            <div id="outC" style="height:100px; background:#FFB90F;top:50px;position:relative;"></div>

        </div>

    </div>

</body>

使用的是事件冒泡，当点击outC的时候，打印顺序是3–>2–>1。如果将false改成true使用事件捕获，打印顺序是1–>2–>3。

(四) DOM事件流

DOM事件流我也不知道怎么解释，个人感觉就是事件冒泡和事件捕获的结合体，直接看图吧。

DOM事件流：将事件分为三个阶段：捕获阶段、目标阶段、冒泡阶段。先调用捕获阶段的处理函数，其次调用目标阶段的处理函数，最后调用冒泡阶段的处理函数。这个过程很类似于Struts2框中的action和Interceptor。当发出一个URL请求的时候，先调用前置拦截器，其次调用action，最后调用后置拦截器。

<script>

    window.onload = function(){

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

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

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

        // 目标(自身触发事件,是冒泡还是捕获无所谓)

        outC.addEventListener('click',function(){alert("target");},true);

        // 事件冒泡

        outA.addEventListener('click',function(){alert("bubble1");},false);

        outB.addEventListener('click',function(){alert("bubble2");},false);

        // 事件捕获

        outA.addEventListener('click',function(){alert("capture1");},true);

        outB.addEventListener('click',function(){alert("capture2");},true);

    };

</script>

<body>

    <div id="outA" style="width:400px; height:400px; background:#CDC9C9;position:relative;">

        <div id="outB" style="height:200; background:#0000ff;top:100px;position:relative;">

            <div id="outC" style="height:100px; background:#FFB90F;top:50px;position:relative;"></div>

        </div>

    </div>

</body>

当点击outC的时候，依次打印出capture1–>capture2–>target–>bubble2–>bubble1。到这里是不是可以理解addEventListener(type,handler,useCapture)这个API中第三个参数useCapture的含义呢？useCapture=false意味着：将事件处理函数加入到冒泡阶段，在冒泡阶段会被调用；useCapture=true意味着：将事件处理函数加入到捕获阶段，在捕获阶段会被调用。从DOM事件流模型可以看出，捕获阶段的事件处理函数，一定比冒泡阶段的事件处理函数先执行。

(五) 再谈事件函数执行先后顺序

在DOM事件流中提到过：

// 目标(自身触发事件,是冒泡还是捕获无所谓)

outC.addEventListener('click',function(){alert("target");},true);

我们在outC上触发onclick事件(这个是目标对象)，如果我们在outC上同时绑定捕获阶段/冒泡阶段事件处理函数会怎么样呢？

 <script>

     window.onload = function(){

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

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

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

         // 目标(自身触发事件,是冒泡还是捕获无所谓)

         outC.addEventListener('click',function(){alert("target2");},true);

         outC.addEventListener('click',function(){alert("target1");},true);

         // 事件冒泡

         outA.addEventListener('click',function(){alert("bubble1");},false);

         outB.addEventListener('click',function(){alert("bubble2");},false);

         // 事件捕获

         outA.addEventListener('click',function(){alert("capture1");},true);

         outB.addEventListener('click',function(){alert("capture2");},true);

     };

 </script>

 <body>

     <div id="outA" style="width:400px; height:400px; background:#CDC9C9;position:relative;">

         <div id="outB" style="height:200; background:#0000ff;top:100px;position:relative;">

             <div id="outC" style="height:100px; background:#FFB90F;top:50px;position:relative;"></div>

         </div>

     </div>

 </body>

点击outC的时候，打印顺序是:capture1–>capture2–>target2–>target1–>bubble2–>bubble1。由于outC是我们触发事件的目标对象，在outC上注册的事件处理函数，属于DOM事件流中的目标阶段。目标阶段函数的执行顺序：先注册的先执行，后注册的后执行。这就是上面我们说的，在目标对象上绑定的函数是采用捕获，还是采用冒泡，都没有什么关系，因为冒泡和捕获只是对父元素上的函数执行顺序有影响，对自己没有什么影响。如果不信，可以将下面的代码放进去验证。

 // 目标(自身触发事件,是冒泡还是捕获无所谓)

 outC.addEventListener('click',function(){alert("target1");},false);

 outC.addEventListener('click',function(){alert("target2");},true);

 outC.addEventListener('click',function(){alert("target3");},true);

 outC.addEventListener('click',function(){alert("target4");},false);

至此我们可以给出事件函数执行顺序的结论了：捕获阶段的处理函数最先执行，其次是目标阶段的处理函数，最后是冒泡阶段的处理函数。目标阶段的处理函数，先注册的先执行，后注册的后执行。

(六) 阻止事件冒泡和捕获

默认情况下，多个事件处理函数会按照DOM事件流模型中的顺序执行。如果子元素上发生某个事件，不需要执行父元素上注册的事件处理函数，那么我们可以停止捕获和冒泡，避免没有意义的函数调用。前面提到的5种事件绑定方式，都可以实现阻止事件的传播。由于第5种方式，是最推荐的做法。所以我们基于第5种方式，看看如何阻止事件的传播行为。IE8以及以前可以通过 window.event.cancelBubble=true阻止事件的继续传播；IE9+/FF/Chrome通过event.stopPropagation()阻止事件的继续传播。

 <script>

     window.onload = function(){

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

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

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

         // 目标

         outC.addEventListener('click',function(event){

             alert("target");

             event.stopPropagation();

         },false);

         // 事件冒泡

         outA.addEventListener('click',function(){alert("bubble");},false);

         // 事件捕获

         outA.addEventListener('click',function(){alert("capture");},true);        

     };

 </script>

 <body>

     <div id="outA" style="width:400px; height:400px; background:#CDC9C9;position:relative;">

         <div id="outB" style="height:200; background:#0000ff;top:100px;position:relative;">

             <div id="outC" style="height:100px; background:#FFB90F;top:50px;position:relative;"></div>

         </div>

     </div>

 </body>

当点击outC的时候，之后打印出capture–>target，不会打印出bubble。因为当事件传播到outC上的处理函数时，通过stopPropagation阻止了事件的继续传播，所以不会继续传播到冒泡阶段。

最后再看一段更有意思的代码：

 <script>

     window.onload = function(){

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

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

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

         // 目标

         outC.addEventListener('click',function(event){alert("target");},false);

         // 事件冒泡

         outA.addEventListener('click',function(){alert("bubble");},false);

         // 事件捕获

         outA.addEventListener('click',function(){alert("capture");event.stopPropagation();},true);        

     };

 </script>

 <body>

     <div id="outA" style="width:400px; height:400px; background:#CDC9C9;position:relative;">

         <div id="outB" style="height:200; background:#0000ff;top:100px;position:relative;">

             <div id="outC" style="height:100px; background:#FFB90F;top:50px;position:relative;"></div>

         </div>

     </div>

 </body>

执行结果是只打印capture，不会打印target和bubble。神奇吧，我们点击了outC，但是却没有触发outC上的事件处理函数，而是触发了outA上的事件处理函数。原因不做解释，如果你还不明白，可以再读一遍本文章。

JS 中的事件设计的更多相关文章

看懂此文，不再困惑于 JS 中的事件设计
看懂此文,不再困惑于 JS 中的事件设计今天刚在关注的微信公众号看到的文章,关于JS事件的,写的很详细也很容易理解,相关的知识点都有总结到,看完就有种很舒畅的感觉,该串起来的知识点都串起来了.反正一 ...
怎么理解js中的事件委托
怎么理解js中的事件委托时间 2015-01-15 00:59:59 SegmentFault 原文 http://segmentfault.com/blog/sunchengli/119000 ...
js中冒泡事件和捕获事件
js中冒泡事件和捕获事件: 冒泡事件:冒泡事件是从里向外,即是从被绑定元素开始一直向外到达页面的所有祖先元素都会被触发,这一过程被称为事件冒泡.这个事件从原始元素开始一直冒泡到DOM树的最上层捕获 ...
js中冒泡事件
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
DOM 以及JS中的事件
[DOM树节点] DOM节点分为三大节点:元素节点,文本节点,属性节点. 文本节点,属性节点为元素节点的两个子节点通过getElment系列方法,可以去到元素节点 [查看节点] 1 document. ...
从零开始的JS生活（二）——BOM、DOM与JS中的事件
上回书说道,JS中变量.运算符.分支结构.循环和嵌套循环等内容.本回就由本K给大伙唠唠JS中的BOM.DOM和事件. 一."花心大萝卜"--BOM 1.震惊,FFF团为何对BOM举 ...
js中的事件，内置对象，正则表达式
[JS中的事件分类] 1.鼠标事件: click/dbclick/mouseover/mouseout/mousemove/mousedown/mouseup 2.键盘事件: keydown: 键盘按 ...
JS中的事件以及DOM 操作
[DOM树节点] DOM节点分为三大节点:元素节点,文本节点,属性节点. 文本节点,属性节点为元素节点的两个子节点通过getElment系列方法,可以去到元素节点 [查看节点] 1 document. ...
JS中的事件&对象
一.JS中的事件 (一)JS中的事件分类 1.鼠标事件 click/dblclick/onmouseover/onmouseout 2.HTML事件 onload/onscroll/onsubmit/ ...

随机推荐

使用Docker搭建Jenkins+Docker持续集成环境（自动化构建发布部署）
本文介绍如何通过Jenkins的docker镜像从零开始构建一个基于docker镜像的持续集成环境,包含自动化构建.发布到仓库\并部署上线. 0. 前置条件服务器安装docker,并启动docker ...
javascript编码标准
前面的话编码标准是有争议的.几乎每个人都有自己的标准,但对标准应该是什么样的,则似乎很少能达成共识.但编码标准意味着,通过共同语言和一致的结构,把开发人员从无意义的工作中解放出来.允许开发人员把创新 ...
linux 常见操作指令
1.ssh root@ip ssh 登录 2.ll ls 列出当文件夹下所以文件 3. cd ./xx 进入 xx 文件夹 4. vim vi xxx 进入 xx文件的编辑模式. i 开始编辑 e ...
Android studio签名与代码混淆
签名: 应用程序升级:应用程序模块化:代码或者数据共享混淆:混淆器将代码中的所有变量.函数.类的名称变为简短的英文字母代号,而混淆后的代码很难被反编译,即使反编译成功也很难得出程序的真正语义.
mongodb数据库安装
mongodb的安装 1,下载安装包: http://www.runoob.com/mongodb/mongodb-window-install.html 2,安装至: D:\MongoDB,将 ...
【转】Memory gates checking failed because the free memory***解决办法
Issue: Vault users cannot connect. VLOGS show the following error: Memory gates checking failed beca ...
Java DB 访问之 mybatis mapper xml 配置方式
1 项目说明项目采用 maven 组织 ,jdbc 唯一的依赖就是 mysql-connector-java pom 依赖如下: mysql 数据连接 : mysql-connector-java ...
Machine Learning - week 4 - 习题
1. 第一个.,是对的. 第二个.结果只会认出是一类,如图:.但这里是为了举例子,实际上不会恰好是 1.而是选择最大概率表示的类别.所以是错误的. 第三个:所有基于 0,1 的逻辑方程都可以使用神经网 ...
【Html5】-- 塔台管制
想做这个游戏已久,今天终于初步完成,先解释下,这是一个模拟机场塔台管制指挥的游戏,飞机从不同的方向飞入管制空域,有不同的目的地,飞机名称最后一个字母表示飞机要到达的目的地,分ABCD和R.A-D表示四 ...
cs231n spring 2017 lecture11 Detection and Segmentation 听课笔记
1. Semantic Segmentation 把每个像素分类到某个语义. 为了减少运算量,会先降采样再升采样.降采样一般用池化层,升采样有各种"Unpooling"." ...

JS 中的事件设计