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 new fun的执行过程
Aug 05 Javascript
JS继承--原型链继承和类式继承
Apr 08 Javascript
jQuery写fadeTo示例代码
Feb 21 Javascript
node.js中的favicon.ico请求问题处理
Dec 15 Javascript
完美实现仿QQ空间评论回复特效
May 06 Javascript
使用Browserify配合jQuery进行编程的超级指南
Jul 28 Javascript
jQuery基于ajax实现星星评论代码
Aug 07 Javascript
js实现动态加载脚本的方法实例汇总
Nov 02 Javascript
javascript实现Email邮件显示与删除功能
Nov 21 Javascript
完美的js div拖拽实例代码
Sep 24 Javascript
JS取模、取商及取整运算方法示例
Oct 13 Javascript
easyui-datagrid特殊字符不能显示的处理方法
Apr 12 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使用mysqldump命令导出数据库
2015/04/14 PHP
laravel ORM 只开启created_at的几种方法总结
2018/01/29 PHP
轻轻松松学习JavaScript
2007/02/25 Javascript
Javascript 构造函数 实例分析
2008/11/26 Javascript
使用js正则控制input标签只允许输入的值
2013/07/29 Javascript
JQuery each打印JS对象的方法
2013/11/13 Javascript
AngularJS学习笔记之基本指令(init、repeat)
2015/06/16 Javascript
js小数计算小数点后显示多位小数的实现方法
2016/05/30 Javascript
JS图片压缩(pc端和移动端都适用)
2017/01/12 Javascript
ES6新特性二:Iterator(遍历器)和for-of循环详解
2017/04/20 Javascript
BootStrap中Table隐藏后显示问题的实现代码
2017/08/31 Javascript
VueAwesomeSwiper在VUE中的使用以及遇到的一些问题
2018/01/11 Javascript
详解Angular5 路由传参的3种方法
2018/04/28 Javascript
Vuex 在Vue 组件中获得Vuex 状态state的方法
2018/08/27 Javascript
深入浅出 Vue 系列 -- 数据劫持实现原理
2019/04/23 Javascript
uni app仿微信顶部导航条功能
2019/09/17 Javascript
在VUE中实现文件下载并判断状态的方法
2019/11/08 Javascript
零基础写python爬虫之爬虫框架Scrapy安装配置
2014/11/06 Python
python通过post提交数据的方法
2015/05/06 Python
你真的了解Python的random模块吗?
2017/12/12 Python
解决pyinstaller打包exe文件出现命令窗口一闪而过的问题
2018/10/31 Python
浅谈Python爬虫基本套路
2019/03/25 Python
在python image 中安装中文字体的实现方法
2019/08/22 Python
Python线程指南分享
2019/11/19 Python
详解python opencv、scikit-image和PIL图像处理库比较
2019/12/26 Python
mac安装python3后使用pip和pip3的区别说明
2020/09/01 Python
css3 响应式媒体查询的示例代码
2019/09/25 HTML / CSS
基于css3的属性transition制作菜单导航效果
2015/09/01 HTML / CSS
UGG美国官网:购买UGG雪地靴、拖鞋和鞋子
2017/12/31 全球购物
2014新年寄语
2014/01/20 职场文书
《水上飞机》教学反思
2014/04/10 职场文书
2014年小学工作总结
2014/11/26 职场文书
廉洁自律承诺书2016
2016/03/25 职场文书
Python如何识别银行卡卡号?
2021/06/10 Python
Linux系统下安装PHP7.3版本
2021/06/26 PHP
javascript之Object.assign()的痛点分析
2022/03/03 Javascript