DOM事件阶段以及事件捕获与事件冒泡先后执行顺序(图文详解)


Posted in Javascript onAugust 18, 2015

俗话说的好,好记性不如个烂笔头,这么多技术文章如果不去吃透,技术点很快就容易忘掉,下面是小编平时浏览的技术文章,整理的笔记,分享给大家。

开发过程中我们都希望使用别人成熟的框架,因为站在巨人的肩膀上会使得我们开发的效率大幅度提升。不过,我们也应该、必须了解其基本原理。比如DOM事件,jquery框架帮我们为我们封装和抽象了各浏览器的差异行为,为事件处理带来了极大的便利。不过浏览器逐步走向统一和标准化,我们可以更加安全地使用官方规范的接口。因为只有获得众多开发者的芳心,浏览器才会走得更远。正如我们现在使用低版本浏览器打开某些页面时,会告知我们要用chrome等高级浏览器访问。不过这是一个革命的过程,为了让我们的webPage更好地服务更多的人,现在我们还不得不对这些历史遗留问题做更好的兼容。要做好兼容,除了依赖框架,我们得理解其基本原理。

DOM事件三个阶段

当一个DOM事件被触发时,它不仅仅只是单纯地在本身对象上触发一次,而是会经历三个不同的阶段:

DOM事件阶段以及事件捕获与事件冒泡先后执行顺序(图文详解)

1.捕获阶段:先由文档的根节点document往事件触发对象,从外向内捕获事件对象;

2.目标阶段:到达目标事件位置(事发地),触发事件;

3.冒泡阶段:再从目标事件位置往文档的根节点方向回溯,从内向外冒泡事件对象。

DOM事件阶段以及事件捕获与事件冒泡先后执行顺序(图文详解)

引用来源:http://www.w3.org/TR/DOM-Level-3-Events/#event-flow

事件捕获与事件冒泡先后执行顺序就显而易见了。

实验部分

 打开在线编辑器:http://jsbin.com/goqede/edit?html,css,js,output

代码如下:

<!DOCTYPE html>
 <html lang="en">
 <head>
   <meta charset="UTF-">
   <title>Document</title>
   <style>
     #outer{
       text-align: center;
       width: px;
       height: px;
       background-color: #ccc;
       margin: auto;
     }
     #middle{
       width: px;
       height: px;
       background-color: #f;
       margin: auto;
     }
     #inner{
       width: px;
       height: px;
       background-color: #f;
       margin: auto;
       border-rad
     }
   </style>
 </head>
 <body>
   <div id='outer'>
     <span>outer</span>
     <div id='middle'>
       <span>middle</span>
       <div id='inner'>
         <span>inner</span>
       </div>
     </div>
   </div>
   <script>
     function $(element){
       return document.getElementById(element);
     }
     function on(element,event_name,handler,use_capture){
       if(addEventListener){
         $(element).addEventListener(event_name,handler,use_capture);
       }
       else{
         $(element).attachEvent('on'+event_name,handler);
       }
     }
     on("outer","click",o_click_c,true);
     on("middle","click",m_click_c,true);
     on("inner","click",i_click_c,true);
     on("outer","click",o_click_b,false);
     on("middle","click",m_click_b,false);
     on("inner","click",i_click_b,false);
     function o_click_c(){
       console.log("outer_捕获");
       alert("outer_捕获");
     }
     function m_click_c(){
       console.log("middle_捕获")
       alert("middle_捕获");
     }
     function i_click_c(){
       console.log("inner_捕获")
       alert("inner_捕获");
     }
     function o_click_b(){
       console.log("outer_冒泡")
       alert("outer_冒泡");
     }
     function m_click_b(){
       console.log("middle_冒泡")
       alert("middle_冒泡");
     }
     function i_click_b(){
       console.log("inner_冒泡")
       alert("inner_冒泡");
     }
   </script>
 </body>
 </html>

当我们点击inner的时候结果是:

DOM事件阶段以及事件捕获与事件冒泡先后执行顺序(图文详解)

outer_捕获

middle_捕获

inner_捕获

inner_冒泡

middle_冒泡

outer_冒泡

由此可见:确实是先由外向内事件捕获,一直到事发元素,在由内向外冒泡到根节点上

tips:

当事件触发在目标阶段时,会根据事件注册的先后顺序执行,在其他两个阶段注册顺序不影响事件执行顺序。也就是说如果该处既注册了冒泡事件,也注册了捕获事件,则按照注册顺序执行。

DOM事件阶段以及事件捕获与事件冒泡先后执行顺序(图文详解)

 例如当我点击inner的时候,按照以上顺序,答案确实是我们想要的答案:

DOM事件阶段以及事件捕获与事件冒泡先后执行顺序(图文详解)

当我的事件注册顺序改变成如下代码时:

DOM事件阶段以及事件捕获与事件冒泡先后执行顺序(图文详解)

当我们点击outer时:

DOM事件阶段以及事件捕获与事件冒泡先后执行顺序(图文详解)

当我们点击middle时:

DOM事件阶段以及事件捕获与事件冒泡先后执行顺序(图文详解)

当我们点击inner时:

DOM事件阶段以及事件捕获与事件冒泡先后执行顺序(图文详解)

可以看出在目标阶段的事发元素上的事件执行顺序是有事件注册顺序决定的

以上内容就是本文对DOM事件阶段以及事件捕获与事件冒泡先后执行顺序(图文详解),希望对大家今后的工作、学习有所帮助。

Javascript 相关文章推荐
Jquery 基础学习笔记
May 29 Javascript
Javascript 静态页面实现随机显示广告的办法
Nov 17 Javascript
jquery.artwl.thickbox.js  一个非常简单好用的jQuery弹出层插件
Mar 01 Javascript
jquery、js操作checkbox全选反选
Mar 12 Javascript
Easyui form combobox省市区三级联动
Jan 13 Javascript
JavaScript与JQUERY获取元素的宽、高和位置
Feb 26 Javascript
微信小程序实现根据字母选择城市功能
Aug 16 Javascript
AngularJS 仿微信图片手势缩放的实例
Sep 28 Javascript
详解如何提升JSON.stringify()的性能
Jun 12 Javascript
JavaScript多种图形实现代码实例
Jun 28 Javascript
详解为什么Vue中的v-if和v-for不建议一起用
Jan 13 Vue.js
关于JavaScript轮播图的实现
Nov 20 Javascript
js实现带有介绍的Select列表菜单实例
Aug 18 #Javascript
jQuery垂直多级导航菜单代码分享
Aug 18 #Javascript
js简单实现表单中点击按钮动态增加输入框数量的方法
Aug 18 #Javascript
js实现的简单radio背景颜色选择器代码
Aug 18 #Javascript
jquery SweetAlert插件实现响应式提示框
Aug 18 #Javascript
js+css实现上下翻页相册代码分享
Aug 18 #Javascript
javascript实现图片上传前台页面
Aug 18 #Javascript
You might like
php实现图形显示Ip地址的代码及注释
2014/01/20 PHP
PHP中文竖排转换实现方法
2015/10/23 PHP
jQuery使用手册之二 DOM操作
2007/03/24 Javascript
js各种验证文本框输入格式(正则表达式)
2010/10/22 Javascript
使用JQuery和CSS模拟超链接的用户单击事件的实现代码
2012/05/23 Javascript
扩展jQuery对象时如何扩展成员变量具体怎么实现
2014/04/25 Javascript
javascript学习笔记(三)BOM和DOM详解
2014/09/30 Javascript
JavaScript中判断整字类型最简洁的实现方法
2014/11/08 Javascript
JavaScript获取当前网页标题(title)的方法
2015/04/03 Javascript
自定义刻度jQuery进度条及插件
2015/09/02 Javascript
JavaScript 2048 游戏实例代码(简单易懂)
2016/03/25 Javascript
JS+jQuery实现注册信息的验证功能
2017/09/26 jQuery
JS实现带导航城市列表以及输入搜索功能
2018/01/04 Javascript
echarts统计x轴区间的数值实例代码详解
2019/07/07 Javascript
微信小程序 弹窗输入组件的实现解析
2019/08/12 Javascript
jQuery列表动态增加和删除的实现方法
2020/11/05 jQuery
微信小程序自定义tabBar的踩坑实践记录
2020/11/06 Javascript
[58:00]DOTA2-DPC中国联赛 正赛 PSG.LGD vs Elephant BO3 第二场 2月7日
2021/03/11 DOTA
详解K-means算法在Python中的实现
2017/12/05 Python
python实现彩票系统
2020/06/28 Python
python读取Excel实例详解
2018/08/17 Python
Python实现多线程的两种方式分析
2018/08/29 Python
Python做智能家居温湿度报警系统
2018/09/25 Python
​如何愉快地迁移到 Python 3
2019/04/28 Python
Python中的十大图像处理工具(小结)
2019/06/10 Python
pyqt5使用按钮进行界面的跳转方法
2019/06/19 Python
python 函数的缺省参数使用注意事项分析
2019/09/17 Python
python实现图片插入文字
2019/11/26 Python
Python flask路由间传递变量实例详解
2020/06/03 Python
Python暴力破解Mysql数据的示例
2020/11/09 Python
英语硕士生求职简历的自我评价
2013/10/15 职场文书
音乐教学随笔感言
2014/02/19 职场文书
教师节活动总结
2014/08/29 职场文书
走进毛泽东观后感
2015/06/04 职场文书
2015年小学重阳节活动总结
2015/07/29 职场文书
2015年度考核个人工作总结
2015/10/24 职场文书