在学习事件传播的时候,发现一个问题,当时是这样子的。

我给多层元素分别绑定了冒泡和捕获事件。按道理应该先从外向内执行完所有的捕获事件,再由内向外执行所有的冒泡事件。

但是天不随人愿啊,有个元素偏偏先执行了冒泡事件,后执行了捕获事件。

我怎么查资料也没弄明白,当时就放下了。今天突然发现自己这个不按规矩的元素正好是我所有bom元素的最里层的元素。

我就想啊,可能是到最里面浏览器就不去区分它绑定的事件是否是捕获还是冒泡了吧。

于是乎我就证明了一下:

第一:我先把最内层元素的捕获事件和冒泡事件换了注册顺序,发现执行顺序也变了耶!看来是不区分了啊!

第二:我往把最里层元素里又添加了一层元素,这时候当你触发在新添加的元素上面的时候,发现两种事件终于按规矩执行了。

现在终于明白了,当你触发某个最具体的元素时,这个元素本身的事件是不区分冒泡还是捕获的。

js事件传播的一个疑惑的更多相关文章

  1. 细说javascripe事件传播流程

    当我们使用js时,经常会遇到事件传播流程的问题,下面我说一下我的观点. 在js触发某个事件时会相应生成一个事件对象,而这个事件对象则会根据DOM事件流的方向进传递,而传递的顺序如下图所示: 事件对象会 ...

  2. spring发布和接收定制的事件(spring事件传播)

    spring发布和接收定制的事件(spring事件传播) 2012-12-26 20:05 22111人阅读 评论(2) 收藏 举报  分类: 开源技术(如Struts/spring/Hibernat ...

  3. spring发布和接收定制的事件(spring事件传播)[转]

    有事件,即有事件监听器. 有人问你spring监听器有哪些你看了下文即也知道了.   事件传播 ApplicationContext基于Observer模式(java.util包中有对应实现),提供了 ...

  4. js事件捕获和冒泡解析

    <div id="box"> <div id="box2"> <p id="test">test< ...

  5. [JS]笔记12之事件机制--事件冒泡和捕获--事件监听--阻止事件传播

    -->事件冒泡和捕获-->事件监听-->阻止事件传播 一.事件冒泡和捕获 1.概念:当给子元素和父元素定义了相同的事件,比如都定义了onclick事件,点击子元素时,父元素的oncl ...

  6. js 事件阻止传播方法,准确定位事件源

    1事件冒泡 在目标元素获得机会处理事件后,事件模型检查目标元素的父元素,看是否为同类型事件建立了处理程序.如果是,则也调用父元素的处理程序.在这之后,再检查其父元素,然后父元素,然后父元素...持续不 ...

  7. 为什么JS事件函数里面都有一个参数(ev)?

    因为ev是事件的参数啊!在ev中包含了事件触发时的参数,比如click事件的ev中包含着.e.pageX,e.pageY,keydown事件中包含着ev.keyCode等,在ie中,ev是全局的可以通 ...

  8. JS中的事件传播流程

    JS中的事件传播流程 1,Javascript与HTML之间的交互是通过事件实现的. 事件,就是文档或浏览器窗口中发生的一些特定的交互瞬间. 可以使用侦听器来预定事件,以便事件发生时执行相应代码. 2 ...

  9. js里事件传播流程

    Javascript与HTML之间的交互是通过事件实现的. 事件,就是文档或浏览器窗口中发生的一些特定的交互瞬间. 可以使用侦听器来预定事件,以便事件发生时执行相应代码. 事件流 JS事件流最早要从I ...

随机推荐

  1. openssl转换各种证书的语法收集

    参考网址:https://www.sslshopper.com/ssl-converter.html 个人总结:先找准要生成什么证书先,尤其是正规购买的流程与openssl生成的不一样,所以先确定是什 ...

  2. javascript --- 原型继承与属性拷贝的综合应用

    对于继承来说,主要目标就是将一些现有的功能据为己有.也就是说,我们在新建一个对象的时候,通常首先继承现有对象,然后再为其添加额外的属性和方法. 对此,我们可以通过一个函数调用来完成. 具体而言就是: ...

  3. 【spring data jpa】repository中使用@Query注解使用hql查询,使用@Param引用参数,报错:For queries with named parameters you need to use provide names for method parameters. Use @Param for query method parameters, or when on

    在spring boot中, repository中使用@Query注解使用hql查询,使用@Param引用参数 如题报错: For queries with named parameters you ...

  4. 【mac IntelliJ Idea】mac上 idea快速重写父类方法 快捷键

    windows上快捷键: Ctrl+O Mac上快捷键: command+O 在要重写父类方法的位置 ,按下快捷键,然后选择要重写的方法即可.

  5. 我们为什么要把Dagger2,MVP以及Rxjava引入项目中?

    1Why? 我们为什么要把Dagger2,MVP以及Rxjava引入项目中? 毫无疑问在Android开发圈中这三个技术是经常被提及的,如此多的文章和开源项目在介绍他们,使用他们,开发者也或多或少的被 ...

  6. iOS经常使用设计模式——单例模式

    第一部分: 创建一个单例对象 单例的应用场景: 单例模式用于当一个类仅仅能有一个实例的时候. 通常情况下这个"单例"代表的是某一个物理设备比方打印机,或是某种不能够有多个实例同一时 ...

  7. python 图像识别转文字

    rom PIL import Image import pytesseract #上面都是导包,只需要下面这一行就能实现图片文字识别 #text=pytesseract.image_to_string ...

  8. 百科知识 tar文件如何打开

    tar 是什么文件格式,是干什么用的,用什么打开 tarball压缩格式,源于Linux的一个指令,Windows上可以用WinRAR打开 Linux的实用程序tar最初是为了制作磁带存档而设计的(把 ...

  9. VUE高仿饿了么app开发思维导图

    来自互联网 文章来源:刘俊涛的博客 地址:http://www.cnblogs.com/lovebing

  10. AMD移动FP5平台时序解释

    好文章推荐:https://wenku.baidu.com/view/199379576137ee06eef91828.html AMD(FP5封装)时序全解. 由于刚开始接触AMD移动平台,难免有错 ...