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的loading 加载提示效果实现代码
Sep 01 Javascript
JavaScript ECMA-262-3 深入解析.第三章.this
Sep 28 Javascript
JS图片预加载 JS实现图片预加载应用
Dec 03 Javascript
初识SmartJS - AOP三剑客
Jun 08 Javascript
javascript setinterval 的正确语法如何书写
Jun 17 Javascript
简介JavaScript中的setDate()方法的使用
Jun 11 Javascript
JQuery的Pager分页器实现代码
May 03 Javascript
form+iframe解决跨域上传文件的方法
Nov 18 Javascript
JavaScript评论点赞功能的实现方法
Mar 13 Javascript
Vue封装的可编辑表格插件方法
Aug 28 Javascript
vue 实现强制类型转换 数字类型转为字符串
Nov 07 Javascript
Element-ui树形控件el-tree自定义增删改和局部刷新及懒加载操作
Aug 31 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
常用表单验证类,有了这个,一般的验证就都齐了。
2006/12/06 PHP
PHP的password_hash()使用实例
2014/03/17 PHP
php的GD库imagettftext函数解决中文乱码问题
2015/01/24 PHP
PHP并发多进程处理利器Gearman使用介绍
2016/05/16 PHP
php函数mkdir实现递归创建层级目录
2016/10/27 PHP
PHPExcel在linux环境下导出报500错误的解决方法
2017/01/26 PHP
Laravel如何友好的修改.env配置文件详解
2017/06/07 PHP
javascript的对话框详解与参数
2007/03/08 Javascript
js 判断计算字符串长度/判断空的简单方法
2013/08/05 Javascript
jquery实现的一个简单进度条效果实例
2014/05/12 Javascript
js实现页面跳转重定向的几种方式
2014/05/29 Javascript
jquery实现点击查看更多内容控制段落文字展开折叠效果
2015/08/06 Javascript
JS实现同一个网页布局滑动门和TAB选项卡实例
2015/09/23 Javascript
Immutable 在 JavaScript 中的应用
2016/05/02 Javascript
微信小程序 http请求详细介绍
2016/10/09 Javascript
JS 实现 ajax 异步浏览器兼容问题
2017/01/21 Javascript
layui前段框架日期控件使用方法详解
2017/05/19 Javascript
js将当前时间格式化为 年-月-日 时:分:秒的实现代码
2018/01/20 Javascript
vue+element-ui实现表格编辑的三种实现方式
2018/10/31 Javascript
微信小程序文章详情页跳转案例详解
2019/07/09 Javascript
vue通过数据过滤实现表格合并
2020/11/30 Javascript
[46:49]完美世界DOTA2联赛PWL S3 access vs Rebirth 第二场 12.19
2020/12/24 DOTA
Python使用函数默认值实现函数静态变量的方法
2014/08/18 Python
python实现按行切分文本文件的方法
2016/04/18 Python
Tensorflow 利用tf.contrib.learn建立输入函数的方法
2018/02/08 Python
Python简单实现阿拉伯数字和罗马数字的互相转换功能示例
2018/04/17 Python
Pytorch自己加载单通道图片用作数据集训练的实例
2020/01/18 Python
对python中arange()和linspace()的区别说明
2020/05/03 Python
小白教你PyCharm从下载到安装再到科学使用PyCharm2020最新激活码
2020/09/25 Python
python字典按照value排序方法
2020/12/28 Python
pycharm配置python 设置pip安装源为豆瓣源
2021/02/05 Python
澳大利亚汽车零部件、音响及配件超市:Automotive Superstore
2018/06/19 全球购物
2016三八妇女节慰问信
2015/11/30 职场文书
《酸的和甜的》教学反思
2016/02/18 职场文书
2019年手机市场的调研报告2篇
2019/10/10 职场文书
Android Studio 计算器开发
2022/05/20 Java/Android