事件冒泡

事件捕获指的是从document到触发事件的那个节点,即自上而下的去触发事件。

事件冒泡自下而上(从最深节点开始,向上传播事件)的触发事件

 //例子
<div id="parent">
  <div id="child" class="child"></div>
</div> <script>
var d_parent = document.getElementById("parent");
var d_child= document.getElementById("child"); d_parent.addEventListener("click",function(e){
alert("parent事件被触发,"+this.id);
})
d_child.addEventListener("click",function(e){
alert("child事件被触发,"+this.id)
})
<script> //结果:
//child事件被触发,child
//parent事件被触发,parent //结论:先child,然后parent。事件的触发顺序自内向外,这就是事件冒泡。

阻止冒泡

绑定事件方法的第三个参数,就是控制事件触发顺序是否为事件捕获。默认false,即事件冒泡。true,事件捕获;false,事件冒泡。

<script>
var d_parent = document.getElementById("parent");
var d_child= document.getElementById("child");
d_parent.addEventListener("click",function(e){
alert("parent事件被触发,"+this.id);
},true)
d_child.addEventListener("click",function(e){
alert("child事件被触发,"+this.id)
},true)
<script> //结果:
//parent事件被触发,parent
//child事件被触发,child //结论:先parent,然后child。事件触发顺序变更为自外向内,这就是事件捕获。

事件捕获
当你使用事件捕获时,父级元素先触发,子级元素后触发,即div先触发,p后触发。

事件冒泡
当你使用事件冒泡时,子级元素先触发,父级元素后触发,即p先触发,div后触发。

 

event.stopPropagation(); -- 阻止元素冒泡事件 

也可以用开关实现,

												

js事件冒泡于事件捕获的更多相关文章

  1. JS事件(事件冒泡和事件捕获)

    事件流:描述的是在页面中接收事件的顺序 事件冒泡:由最具体的元素接收,然后逐级向上传播至最不具体的元素的节点(文档) 事件捕获:最不具体的节点先接收事件,而最具体的节点应该是最后接收事件 DOM中:用 ...

  2. js进阶 12-2 彻底弄懂JS的事件冒泡和事件捕获

    js进阶 12-2 彻底弄懂JS的事件冒泡和事件捕获 一.总结 一句话总结:他们是描述事件触发时序问题的术语.事件捕获指的是从document到触发事件的那个节点,即自上而下的去触发事件.相反的,事件 ...

  3. JS事件冒泡与事件捕获怎么理解?

    在js中存在事件冒泡与事件捕获两种概念,这两个概念都是为了解决页面中事件流(事件发生顺序)的问题. 事件冒泡(dubbed bubbling) 事件冒泡我们从字面意思理解就是当用户行为触发我们页面的定 ...

  4. JS中的事件绑定,事件捕获,事件冒泡以及事件委托,兼容IE

    转载请注明出处:http://www.cnblogs.com/zhangmingze/p/4864367.html   ● 事件分为三个阶段:   事件捕获 -->  事件目标 -->   ...

  5. js 事件冒泡和事件捕获

    事件流:指的是网页中元素接受事件的顺序,它是一个概念,而不是具体的实际的东西 事件冒泡:指的是内层元素的事件,会触发包含着此元素的外层元素的事件,触发的顺序是:由内而外的 例如: <!DOCTY ...

  6. 彻底弄懂JS的事件冒泡和事件捕获

      先上结论:在事件执行流中有两种执行方式.一种是事件冒泡(即事件的执行顺序是从下往上执行的) ;  另一种是捕获(即事件的执行顺序是从上往下执行的); 阻止事件冒泡:   return false; ...

  7. js高级:event,事件冒泡,事件捕获

    1.事件 浏览器客户端上客户触发的行为都称为事件 所有的事件都是天生自带的,不需要我们去绑定,只需要我们去触发. 通过 obj.事件名=function(){} 事件名:onmouseover 鼠标悬 ...

  8. JS高级:事件冒泡和事件捕获;

    1.事件:浏览器客户端上客户触发的行为成为时事件:所有的事件都是天生自带的,不需要我们去绑定,只需要我们去触发 当用户触发一个事件时,浏览器的所有详细信息都存在一个叫做event的对象上,我们把它叫做 ...

  9. 彻底弄懂JS的事件冒泡和事件捕获(不推荐阅读)

    由于搬去敌台了,好久没来博客园,今天无意中翻到有“误认子弟”的评论,这里特意做个说明. 本文中关于事件冒泡和事件捕获的描述和例子都是OK的,错就错在后面用jquery去展示了利用事件冒泡的例子有误,其 ...

  10. JS事件冒泡和事件捕获的详解

    在学校,听老师讲解事件冒泡和事件捕获机制的时候跟听天书一样,只依稀记得IE使用的是事件冒泡,其他浏览器则是事件捕获.当时的我,把它当成IE浏览器兼容问题,所以没有深究(IE8以下版本的浏览器已基本退出 ...

随机推荐

  1. js内置对象常用方法

    JS内置对象: ● String对象:处理所有的字符串操作 ● Math对象:处理所有的数学运算 ● Date对象:处理日期和时间的存储.转化和表达 ● Array对象:提供一个数组的模型.存储大量有 ...

  2. 什么情况下JVM内存中的一个对象会被垃圾回收?

    新生代满了会触发 Young GC,老年代满了会触发 Old GC.GC时会回收对象,那么具体是什么样的对象会被垃圾回收器回收呢? 可达性分析算法,判断是否被 GC Roots 引用 判断引用类型:强 ...

  3. Java中使用RSA算法加密

    Java中使用RSA算法加密 概述 RSA加密算法是一种非对称加密算法 RSA加密的方式 使用公钥加密的数据,利用私钥进行解密 使用私钥加密的数据,利用公钥进行解密 RSA是一对密钥.分别是公钥和私钥 ...

  4. Python常用模块之模块的使用

      一 模块介绍 1.什么是模块? #常见的场景:一个模块就是一个包含了一组功能的python文件,比如spam.py,模块名为spam,可以通过import spam使用. #在python中,模块 ...

  5. Pyhton多线程

    在了解多线程前先给大家介绍下并发和并行: 并发:多个任务一起执行 在多任务之间快速切换处理 任务数量大于cpu核数  并行:一个cpu核处理一个任务,多个cpu核同时处理多个任务 任务数量等于或者小于 ...

  6. QCustomPlot图形和图例同步方法

    QCustomPlot图形和图例同步前言 我现在有几条折线,折线和图例一一对应,不管点击图例或者折线,相关的都高亮 QCustomPlot图形和图例同步方法 // 链接信号槽 m_plot即为QCus ...

  7. CentOS7部署指南

    1.rpm包安装---下载安装文件 wget https://pkg.jenkins.io/redhat/jenkins-2.156-1.1.noarch.rpm rpm -ivh jenkins-2 ...

  8. 使用IDEA创建SpringBoot项目

    SpringBoot学习第一步:搭建基础 IDEA对SpringBoot的项目支持可以说是点击就能完成基础的搭建,方便的不得了, 流程如下 1.左上角File选项,New project,选择Spri ...

  9. SWUST OJ 1012哈希表(链地址法处理冲突)

    哈希表(链地址法处理冲突) 1000(ms) 10000(kb) 2676 / 6911 采用除留余数法(H(key)=key %n)建立长度为n的哈希表,处理冲突用链地址法.建立链表的时候采用尾插法 ...

  10. 记一次Windb死锁排查

    正在开会,突然线上站点线程数破千.然后一群人现场dump分析. 先看一眼线程运行状态 !eeversion 发现CPU占用并不高,19%,937条线程正在运行. 看看他们都在干什么. ~* e !cl ...