首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Javascript

javaScript 事件绑定、事件冒泡、事件捕获和事件执行顺序整理总结

Posted in Javascript onOctober 10, 2016

抽空学习了下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：

<div id="outestA" onclick="var id = this.id;alert(id);return false;"></div>

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

方式2：

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

<script>

 function buttonHandler(thisDom)
 {
 alert(this.id);//undefined
 alert(thisDom.id);//outestA
 return false;
 }
</script>
<div id="outestA" onclick="return buttonHandler(this);"></div>

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

方式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，从上到下，像石头一样，从水面落入水底。

事件冒泡见下图：

javaScript 事件绑定、事件冒泡、事件捕获和事件执行顺序整理总结

事件捕获见下图：

javaScript 事件绑定、事件冒泡、事件捕获和事件执行顺序整理总结

一般来说事件冒泡机制，用的更多一些，所以在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事件流我也不知道怎么解释，个人感觉就是事件冒泡和事件捕获的结合体，直接看图吧。

javaScript 事件绑定、事件冒泡、事件捕获和事件执行顺序整理总结

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上的事件处理函数。原因不做解释，如果你还不明白，可以再读一遍本文章。

感谢阅读，希望能帮助到大家，谢谢大家对本站的支持！

javaScript 事件绑定、事件冒泡、事件捕获和事件执行顺序整理总结

- Author -

aitangyong

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐
jQuery ajax cache缓存问题
Jul 01 Javascript
javascript SpiderMonkey中的函数序列化如何进行
Dec 05 Javascript
JavaScript中的getTimezoneOffset()方法使用详解
Jun 10 Javascript
JavaScript检测字符串中是否含有html标签实现方法
Jul 01 Javascript
javascript每日必学之多态
Feb 23 Javascript
JavaScript的设计模式经典之代理模式
Feb 24 Javascript
Bootstrap开发实战之响应式轮播图
Jun 02 Javascript
15位和18位身份证JS校验的简单实例
Jul 18 Javascript
js 声明数组和向数组中添加对象变量的简单实例
Jul 28 Javascript
jQuery实现获取table中鼠标click点击位置行号与列号的方法
Oct 09 jQuery
基于VUE实现判断设备是PC还是移动端
Jul 03 Javascript
vue前端和Django后端如何查询一定时间段内的数据
Feb 28 Vue.js
jQuery EasyUI tree 使用拖拽时遇到的错误小结
Oct 10 #Javascript
jQuery继承extend用法详解
Oct 10 #Javascript
mvc 、bootstrap 结合分布式图简单实现分页
Oct 10 #Javascript
针对后台列表table拖拽比较实用的jquery拖动排序
Oct 10 #Javascript
KnockoutJS 3.X API 第四章之数据控制流foreach绑定
Oct 10 #Javascript
KnockoutJS 3.X API 第四章之数据控制流if绑定和ifnot绑定
Oct 10 #Javascript
KnockoutJS 3.X API 第四章之数据控制流with绑定
Oct 10 #Javascript
PL990(2) S500(1) ICF-SW07(1) S700(1) S400(1) PL450(1) BCL3000(2) ICF-SW7600(1) H-501(1) 低放电路(1)
You might like
PHP之sprintf函数用法详解
2014/11/12 PHP
Laravel 5框架学习之向视图传送数据(进阶篇)
2015/04/08 PHP
twig模板获取全局变量的方法
2016/02/05 PHP
php中的抽象方法和抽象类
2017/02/14 PHP
CentOS 上搭建 PHP7 开发测试环境
2017/02/26 PHP
php 函数中静态变量使用的问题实例分析
2020/03/05 PHP
基于jQuery的树控件实现代码(asp.net+json)
2010/07/11 Javascript
使用js画图之圆、弧、扇形
2015/01/12 Javascript
javascript封装简单实现方法
2015/08/11 Javascript
快速使用Bootstrap搭建传送带
2016/05/06 Javascript
老生常谈 js中this的指向
2016/06/30 Javascript
基于Bootstrap漂亮简洁的CSS3价格表(附源码下载)
2017/02/28 Javascript
JS正则替换去空格的方法
2017/03/24 Javascript
nodejs模块nodemailer基本使用-邮件发送示例(支持附件)
2017/03/28 NodeJs
JS按钮闪烁功能的实现代码
2017/07/21 Javascript
React中的render何时执行过程
2018/04/13 Javascript
详解AngularJS 过滤器的使用
2018/06/02 Javascript
jQuery实现手风琴效果（蒙版）
2020/01/11 jQuery
Python安装Imaging报错：The _imaging C module is not installed问题解决方法
2014/08/22 Python
python绘制立方体的方法
2018/07/02 Python
Python 余弦相似度与皮尔逊相关系数 计算实例
2019/12/23 Python
Python对称的二叉树多种思路实现方法
2020/02/28 Python
Python select及selectors模块概念用法详解
2020/06/22 Python
python中把元组转换为namedtuple方法
2020/12/09 Python
英国图书音像网站：Hive.co.uk（图书、电子书、DVD、蓝光、音乐CD等）
2017/10/16 全球购物
解决python 输出到csv 出现多空行的情况
2021/03/24 Python
单位消防安全制度
2014/01/12 职场文书
大一学生职业生涯规划
2014/03/11 职场文书
2014最新毕业证代领委托书
2014/09/26 职场文书
2014年妇幼保健工作总结
2014/12/08 职场文书
百年校庆感言
2015/08/01 职场文书
pytest进阶教程之fixture函数详解
2021/03/29 Python
启动Tomcat时出现大量乱码的解决方法
2021/06/21 Java/Android
CSS实现隐藏搜索框功能(动画正反向序列)
2021/07/21 HTML / CSS
日本十大血腥动漫，那些被禁播的动漫盘点
2022/03/21 日漫
纯CSS实现一个简单步骤条的示例代码
2022/07/15 HTML / CSS