我一直想搞清楚事件在DOM中的传播方式,今天经高人指点终于明白一二。首先扒了一张图:

事件捕获过程:当我们点击TEXT时,首先是window->document->body->div->text.这个过程称为事件捕获,W3C浏览器的标准执行流程。

事件冒泡过程:text->div->body->document->window.这个过程称为事件冒泡。IE浏览器只支持冒泡,不支持捕获。W3C浏览器先执行捕获,后执行冒泡。

再来看看addEventLister()函数,第3个参数默认为false,表示事件以冒泡的方法传播,当为true时,表示以捕获的方法。

 <div class="selector2">selector2<div class="selector1">selector1</div></div>
<script type="text/javascript">
window.onload=function(){
var selector2 = document.querySelector(".selector2"),
selector1 = document.querySelector(".selector1"); //第三个参数默认为false,以冒泡的方式
selector1.addEventListener("click",function(){
console.log("selector1");
})
selector2.addEventListener("click",function(){
console.log("selector2");
})
document.body.addEventListener("click",function(){
console.log("body click");
})
//点击selector1 输出selector1,selector2,body click
//点击selector2 输出selector2,body click
</script>

其中selector1,selector2都是以冒泡的方法传播事件,先执行自己的click,再执行parentNode的click.

      //第三个参数默认为true,以捕获的方式
selector1.addEventListener("click",function(){
console.log("selector1");
})
selector2.addEventListener("click",function(){
console.log("selector2");
},true) document.body.addEventListener("click",function(){
console.log("body click");
},true)
//点击selector1 输出body click,selector2,selector1
//点击selector2 输出body click,selector2

其中selector2和body以捕获方式执行,当点击selector1时,最先是body捕获,然后是selector2捕获,最后才传递到selector1。

如果把selector1也以捕获方式,结果还是一样的,以为selector1中没有元素捕获不到子元素的事件。

 //第三个参数默认为false,以冒泡的方式,想让谁不冒泡的话在他的事件里面加上stopPropagation
selector1.addEventListener("click",function(e){
var e=window.event || e;
e.stopPropagation();
e.cancelBubble=true; //IE冒泡
console.log("selector1");
})
selector2.addEventListener("click",function(e){
console.log("selector2");
})
//点击selector1输出selector1
     //点击selector2输出selecttor2

阻止了事件传播selector1不能向上冒泡了,如果把selector2的方式改为捕获,则点击selector1时输出selector2,selector1。selector2能捕获到它内部的selector1的事件。

      selector1.addEventListener("click",function(){
console.log("selector1");
})
selector2.addEventListener("click",function(e){
var e=window.event || e;
e.stopPropagation();
console.log("selector2");
},true)
//点击selector1和selector2都输出selector2

见证奇迹时刻到了,点击selector1和selector2都输出selector2。

当我点击selector1时
事件流程: body->selector2-XX->selector1->selector2->body。因为selector2的捕获断了,不能传递到selector1。

总结:子元素绑定事件,父元素是捕获,则先于子元素响应事件,父元素是冒泡,则后于子元素响应事件

javascript事件执行流程分析的更多相关文章

  1. 报时机器人的rasa shell执行流程分析

      本文以报时机器人为载体,介绍了报时机器人的对话能力范围.配置文件功能和训练和运行命令,重点介绍了rasa shell命令启动后的程序执行过程. 一.报时机器人项目结构 1.对话能力范围 (1)能够 ...

  2. 深入浅出Mybatis系列(十)---SQL执行流程分析(源码篇)

    最近太忙了,一直没时间继续更新博客,今天忙里偷闲继续我的Mybatis学习之旅.在前九篇中,介绍了mybatis的配置以及使用, 那么本篇将走进mybatis的源码,分析mybatis 的执行流程, ...

  3. ThinkPHP 框架执行流程分析

    总体来说,应用的流程涉及到几个文件:Index.phpThinkPHP.phpThink.class.phpApp.class.phpDispatcher.class.phpThinkPHP/Mode ...

  4. Spring 文件上传MultipartFile 执行流程分析

    在了解Spring 文件上传执行流程之前,我们必须知道两点: 1.Spring 文件上传是基于common-fileUpload 组件的,所以,文件上传必须引入此包 2.Spring 文件上传需要在X ...

  5. [转]两表join的multi update语句在MySQL中的执行流程分析

    出自:http://hedengcheng.com/?p=209 两表join的multi update语句,执行结果与预计不一致的分析过程 — multi update结论在实际应用中,不要轻易使用 ...

  6. Hive SQL执行流程分析

    转自 http://www.tuicool.com/articles/qyUzQj 最近在研究Impala,还是先回顾下Hive的SQL执行流程吧. Hive有三种用户接口: cli (Command ...

  7. spark-sql执行流程分析

    spark-sql 架构 图1 图1是sparksql的执行架构,主要包括逻辑计划和物理计划几个阶段,下面对流程详细分析. sql执行流程 总体流程 parser:基于antlr框架对 sql解析,生 ...

  8. Netty执行流程分析与重要组件介绍

    一.环境搭建 创建工程,引入Netty依赖 二.基于Netty的请求响应Demo 1.TestHttpServerHandle  处理器.读取客户端发送过来的请求,并且向客户端返回hello worl ...

  9. 深入浅出Mybatis系列十-SQL执行流程分析(源码篇)

    注:本文转载自南轲梦 注:博主 Chloneda:个人博客 | 博客园 | Github | Gitee | 知乎 最近太忙了,一直没时间继续更新博客,今天忙里偷闲继续我的Mybatis学习之旅.在前 ...

随机推荐

  1. formValidator 表单验证

    作为一名程序员,在解决工作中遇到问题之后,做一些总结是有必要的,既方便总结温习相关知识点,也为广大的程序员提供了一些工作经历,给予同行一面明鉴. 首先,众所周知的,我们需要引用js类库: eg:< ...

  2. SOAP Webservice和RESTful Webservice

    http://blog.sina.com.cn/s/blog_493a845501012566.html REST是一种架构风格,其核心是面向资源,REST专门针对网络应用设计和开发方式,以降低开发的 ...

  3. js中的类数组对象---NodeList

    动态 NodeList 这是文档对象模型(DOM,Document Object Model)中的一个大坑. NodeList 对象(以及 HTML DOM 中的 HTMLCollection对象)是 ...

  4. js 反显查询。

    反显就是点击查询之后,查询条件消失,正常解决很容易,就是查询的表单value等于返回过来的值 ,比如这样,初始化时候的devNumber是空的,点击查询的时候会有值,我们在返回来显示就可以了. < ...

  5. function中的ajax怎么返回一个数

  6. mysql常用操作

    一.什么是数据库 数据库(Database)是按照数据结构来组织.存储和管理数据的仓库. SQL( Structured Query Language)语言的全称是结构化查询语言.数据库管理系统通过S ...

  7. SpringMVC中定时器继承Task后无法对service注入问题

    最近在做一个Spring+MyBatis的一个项目,其中用到了Redis的存储,然后遇到问题是这样的: RedisTask是通过定时器来每分钟像数据库里推送的,于是就有了 public class R ...

  8. Retrofit学习笔记01

    retrofit把你的HTTP API改造成java接口. public interface GitHubService { @GET("users/{user}/repos") ...

  9. Sql/Plus连接Oracle时候出现sql*net not properly installed 解决办法

    在PLSQL Developer选择Tools > Preferences > options > 下的如图所示:"Oracle Home" and " ...

  10. ionic2配置问题集

    我在配置ionic2中遇到的问题,及我的解决方案. ionic start MyIonic2Project tutorial --v2 网络很坑爹,配置lantern后,也是多次尝试才下载成功. io ...