js事件传播的一个疑惑
在学习事件传播的时候,发现一个问题,当时是这样子的。
我给多层元素分别绑定了冒泡和捕获事件。按道理应该先从外向内执行完所有的捕获事件,再由内向外执行所有的冒泡事件。
但是天不随人愿啊,有个元素偏偏先执行了冒泡事件,后执行了捕获事件。
我怎么查资料也没弄明白,当时就放下了。今天突然发现自己这个不按规矩的元素正好是我所有bom元素的最里层的元素。
我就想啊,可能是到最里面浏览器就不去区分它绑定的事件是否是捕获还是冒泡了吧。
于是乎我就证明了一下:
第一:我先把最内层元素的捕获事件和冒泡事件换了注册顺序,发现执行顺序也变了耶!看来是不区分了啊!
第二:我往把最里层元素里又添加了一层元素,这时候当你触发在新添加的元素上面的时候,发现两种事件终于按规矩执行了。
现在终于明白了,当你触发某个最具体的元素时,这个元素本身的事件是不区分冒泡还是捕获的。
js事件传播的一个疑惑的更多相关文章
- 细说javascripe事件传播流程
当我们使用js时,经常会遇到事件传播流程的问题,下面我说一下我的观点. 在js触发某个事件时会相应生成一个事件对象,而这个事件对象则会根据DOM事件流的方向进传递,而传递的顺序如下图所示: 事件对象会 ...
- spring发布和接收定制的事件(spring事件传播)
spring发布和接收定制的事件(spring事件传播) 2012-12-26 20:05 22111人阅读 评论(2) 收藏 举报 分类: 开源技术(如Struts/spring/Hibernat ...
- spring发布和接收定制的事件(spring事件传播)[转]
有事件,即有事件监听器. 有人问你spring监听器有哪些你看了下文即也知道了. 事件传播 ApplicationContext基于Observer模式(java.util包中有对应实现),提供了 ...
- js事件捕获和冒泡解析
<div id="box"> <div id="box2"> <p id="test">test< ...
- [JS]笔记12之事件机制--事件冒泡和捕获--事件监听--阻止事件传播
-->事件冒泡和捕获-->事件监听-->阻止事件传播 一.事件冒泡和捕获 1.概念:当给子元素和父元素定义了相同的事件,比如都定义了onclick事件,点击子元素时,父元素的oncl ...
- js 事件阻止传播方法,准确定位事件源
1事件冒泡 在目标元素获得机会处理事件后,事件模型检查目标元素的父元素,看是否为同类型事件建立了处理程序.如果是,则也调用父元素的处理程序.在这之后,再检查其父元素,然后父元素,然后父元素...持续不 ...
- 为什么JS事件函数里面都有一个参数(ev)?
因为ev是事件的参数啊!在ev中包含了事件触发时的参数,比如click事件的ev中包含着.e.pageX,e.pageY,keydown事件中包含着ev.keyCode等,在ie中,ev是全局的可以通 ...
- JS中的事件传播流程
JS中的事件传播流程 1,Javascript与HTML之间的交互是通过事件实现的. 事件,就是文档或浏览器窗口中发生的一些特定的交互瞬间. 可以使用侦听器来预定事件,以便事件发生时执行相应代码. 2 ...
- js里事件传播流程
Javascript与HTML之间的交互是通过事件实现的. 事件,就是文档或浏览器窗口中发生的一些特定的交互瞬间. 可以使用侦听器来预定事件,以便事件发生时执行相应代码. 事件流 JS事件流最早要从I ...
随机推荐
- 好用的Python IDLE Sublime Text 3推荐
Sublime Text 3 下载地址为 LINK, Sublime Text 3 is currently in beta. The latest build is 3114. 参考的激活方式为输入 ...
- openfire Android学习---android客户端聊天开发之登录 和 注销登录
一切就绪,新建一个android测试工程: 上网权限配置,界面绘制啥的,这里就不说了. 首先 导入一个smark包.这个是用来维护长连接的,也可以是asmark.我用的是asmark 先普及一些基本知 ...
- Activiti 流程部署方式 activi 动态部署(高级源代码篇)
Activiti的流程 部署方式有非常多种方式,我们能够依据activit工作流引擎提供的ap方式进行部署. 当然了实际需求决定你要使用哪一种api操作,后面的总结具体介绍了使用场景. 以下看一下部署 ...
- Spring 与 MyBatis 整合
一.实验介绍 1.1 实验内容 本节课程将整合 Spring 和 MyBatis,并采用 Junit 进行单元测试. 1.2 实验知识点 Spring - MyBatis 整合 Junit 单元测试 ...
- ShadowMap渲染阴影方法及问题 【转】
ShadowMap基于的原理:SM算法是一个2-pass绘制算法,第一pass从光源视点绘制场景,生成SM纹理,第2pass从视点视图按常规方法绘制场景 从光源的位置观察场景,这时候我们看不到的地方就 ...
- Keras学习
参加比赛用到了keras,虽然之前用tensorflow,但是感觉tensorflow的确不太友好,api比较难读,然后就学习keras使用 随着深入,发现keras的api确实比较友好 跑了一些ex ...
- 高仿QQ6.0側滑菜单之滑动优化(二)
好了,昨天已经实现了高仿QQ6.0的側滑大致框架.如有兴趣.能够去看下仿QQ6.0側滑之ViewDragHelper的使用(一) 可是之前的实现.仅仅是简单的能够显示和隐藏左側的菜单,可是特别生硬,并 ...
- 杂谈之WEB前端project师身价
了解javascript语言规范么?+1000 知道各浏览器的css差异么?+1000 javascript差异呢?+1000 知道html各标签的含义并不是常好地运用么?+1000 知道怎样跨浏览器 ...
- sql 表的部分字段查找 的结果集
传统sql从多个对象中获得的list<Object> ,可以这样处理(利用Map) List list = query.getList(sql); //封装成BB类型 List< ...
- Odoo 养猪
阶段 仔猪养成为肉猪 乳猪养成为仔猪 母猪繁殖乳猪 每一个饲养阶段,基本上在同一组笼舍,活动场所:进入到下一饲养阶段才会转换笼舍.在每一个饲养阶段,基本上经历以下过程 饲养 注射疫苗 饲养 投 ...