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 相关文章推荐
javascript 火狐(firefox)不显示本地图片问题解决
Jul 05 Javascript
js函数setTimeout延迟执行的简单介绍
Jul 17 Javascript
基于JQuery的列表拖动排序实现代码
Oct 01 Javascript
js实现class样式的修改、添加及删除的方法
Jan 20 Javascript
JavaScript实现下拉菜单的显示和隐藏
Jan 05 Javascript
实践中学习AngularJS表单
Mar 21 Javascript
js实现背景图自适应窗口大小
Jan 10 Javascript
js实现旋转木马效果
Mar 17 Javascript
使用JavaScriptCore实现OC和JS交互详解
Mar 28 Javascript
Node.js 中使用 async 函数的方法
Nov 20 Javascript
vue实现输入一位数字转汉字功能
Dec 13 Javascript
JavaScript设计模式---单例模式详解【四种基本形式】
May 16 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中VC6 X86和VC9 X86的区别及 Non Thread Safe的意思
2013/06/28 PHP
php中实现进程锁与多进程的方法
2016/09/18 PHP
PHP实现表单提交时去除斜杠的方法
2016/12/26 PHP
php设计模式之策略模式应用案例详解
2019/06/17 PHP
js删除所有的cookie的代码
2010/11/25 Javascript
Jquery中获取iframe的代码
2011/01/11 Javascript
jQuery 图片切换插件(代码比较少)
2012/05/07 Javascript
avalonjs制作响应式瀑布流特效
2015/05/06 Javascript
jquery实现文本框textarea自适应高度
2016/03/09 Javascript
静态页面html中跳转传值的JS处理技巧
2016/06/22 Javascript
全面解析Angular中$Apply()及$Digest()的区别
2016/08/04 Javascript
jquery实现百叶窗效果
2017/01/12 Javascript
js实现一个猜数字游戏
2017/03/31 Javascript
Vue底层实现原理总结
2018/02/17 Javascript
js字符串倒序的实例代码
2018/11/30 Javascript
小程序角标的添加及绑定购物车数量进行实时更新的实现代码
2020/12/07 Javascript
Vue单页面应用中实现Markdown渲染
2021/02/14 Vue.js
[54:41]2018DOTA2亚洲邀请赛3月30日 小组赛B组 VGJ.T VS paiN
2018/03/31 DOTA
[50:48]LGD vs CHAOS 2019国际邀请赛小组赛 BO2 第二场 8.15
2019/08/16 DOTA
一个可以套路别人的python小程序实例代码
2019/04/09 Python
Python利用lxml模块爬取豆瓣读书排行榜的方法与分析
2019/04/15 Python
python多线程并发实例及其优化
2019/06/27 Python
python 随机森林算法及其优化详解
2019/07/11 Python
python打造爬虫代理池过程解析
2019/08/15 Python
vim自动补全插件YouCompleteMe(YCM)安装过程解析
2019/10/21 Python
Python操作Excel工作簿的示例代码(\*.xlsx)
2020/03/23 Python
卸载tensorflow-cpu重装tensorflow-gpu操作
2020/06/23 Python
属性与 @property 方法让你的python更高效
2020/09/21 Python
python 装饰器的使用示例
2020/10/10 Python
Python datetime模块的使用示例
2021/02/02 Python
纯CSS实现的大小渐变、渐远效果
2014/04/15 HTML / CSS
医学专业毕业生个人的求职信
2013/12/04 职场文书
运动会入场式解说词
2014/02/18 职场文书
《平移和旋转》教学反思
2016/02/19 职场文书
golang goroutine顺序输出方式
2021/04/29 Golang
Python如何利用pandas读取csv数据并绘图
2022/07/07 Python