JavaScript 事件（冒泡捕获）处理模型
JavaScript 事件处理模型 （冒泡&捕获）
1.事件处理流程
- DOM 结构： html --> body --> div(事件绑定对象)
2. 事件捕获阶段
- 获取事件触发对象： html -> body -> div(事件绑定对象)
3.事件冒泡阶段
- 从下至上依次冒泡： div(事件绑定对象) -> body -> html
4.事件处理程序执行位置
- 默认事件处理程序在冒泡阶段执行
- 可通过 ele.addEventListener 的第三个参数来控制
- 参数默认为 false ，表示事件处理程序在事件冒泡阶段执行，如果参数为 true，则事件处理程序在捕获阶段执行，并且将没有事件冒泡阶段
5.阻止事件冒泡
通过
e.stopPropagation阻止事件冒泡if (e) {// 阻止事件冒泡e.stopPropagation();// 阻止元素默认行为e.preventDefault();} else {window.event.returnValue = false;window.event.cancelBubble = true;}
6.总结
- 事件处理流程
- 事件捕获阶段 html -> body -> div
- 事件冒泡阶段 div -> body -> html
- 事件处理程序位置
- 默认在事件冒泡阶段执行
- 可通过 addEventListener 的第三个参数设置
- 默认： false 事件处理程序在冒泡阶段执行
- true 事件处理程序在事件捕获阶段执行 设置了这个， 后面就没有冒泡过程了
- 阻止事件冒泡
- 通过
e.stopPropagation阻止事件冒泡 - e.stopPropagation()
- 代码：
if (e) {// 阻止事件冒泡e.stopPropagation();// 阻止元素默认行为e.preventDefault();} else {window.event.returnValue = false;window.event.cancelBubble = true;}
- 通过
JavaScript 事件（冒泡捕获）处理模型相关推荐
- JavaScript事件冒泡简介及应用
JavaScript事件冒泡简介及应用 一.什么是事件冒泡 在一个对象上触发某类事件(比如单击onclick事件),如果此对象定义了此事件的处理程序,那么此事件就会调用这个处理程序,如果没有定义此事件 ...
- JavaScript事件冒泡和事件委托
JavaScript事件冒泡和事件委托 付建宇 - 2 条评论 接触JavaScript不久,学的东西也不是特别多.小雨就是习惯把平时学到的东西拿出来分享.一方面加强自己的印象,一方面可以让自己的经验 ...
- JavaScript事件冒泡应用实例
在一些传统的小型WEB应用开发过程中,JavaScript通常只是拿来做表单验证而以,所以你很少会遇到因为JavaScript事件冒泡而影响功能的实现情况,又或者事件冒泡对最终实现效果影响不大,可忽略 ...
- jQuery中的事件冒泡捕获阻止冒泡
jQuery中的事件冒泡捕获阻止冒泡 事件冒泡 IE中的事件流叫做事件冒泡,就是又最开始的时间接收到逐级向上传播较为不具体的节点.IE9.谷歌浏览器.Safari.Opera等等都是将事件一直冒泡到w ...
- JavaScript事件冒泡、事件捕获和阻止默认事件
谈起JavaScript的 事件,事件冒泡.事件捕获.阻止默认事件这三个话题,无论是面试还是在平时的工作中,都很难避免. 冒泡篇 先来看一段实例: js: var $input = document. ...
- JavaScript事件冒泡和事件捕获
阅读目录 总结 事件冒泡和事件捕获 HTML结构 需求:鼠标放到 li上对应的 li 背景变灰 源码 总结 它是描述事件触发时序问题的术语. 事件捕获指的是从 document 到触发事件的那个节点, ...
- JavaScript 事件冒泡简介及应用（转）
http://www.jb51.net/article/21801.htm 一.什么是事件冒泡 在一个对象上触发某类事件(比如单击onclick事件),如果此对象定义了此事件的处理程序,那么此事件就会 ...
- javascript 事件冒泡 和 冒泡事件阻止
本文摘自网友的文章 http://www.cnblogs.com/wuhen/archive/2010/08/12/1798348.html http://www.cnblogs.com/jams74 ...
- JavaScript事件冒泡
2019独角兽企业重金招聘Python工程师标准>>> 事件的冒泡和捕获 事件的冒泡有什么好处 事件冒泡的优点和缺点 不是所有的事件都能冒泡 阻止事件冒泡 阻止jQuery事件冒泡 ...
- javascript 事件冒泡处理方式
在工作中遇到 javascript 冒泡的情况,特此记录一下.我们要实现点击包含此课程vip上面的区域进行关闭窗口也就是div的隐藏,点击 包含此课程vip 以下的区域不进行关闭窗口,实际效果是下面的 ...
最新文章
- bootstrap菜单展开收起_菜单展开及收缩效果 bootstrap+jquery
- 第四周项目一-求两个数的最大公约数
- go语言 mysql卡死,Go语言MySQL优化
- 大物实验计算弹性模量_普渡大学amp;橡树岭国家实验室IPJ：强度高达2.4GPa，双相纳米复合结构助力铝合金性能大幅提高！...
- 3分钟学会Linux管道符与重定向
- 事务的传播性和隔离级别
- 前端学习（2590）：前端权限的菜单控制
- 面试官系统精讲Java源码及大厂真题 - 35 经验总结：各种锁在工作中使用场景和细节
- python的编程工具spider_7款Python开发神器，拿走不谢
- 大前端的自动化工厂（2）—— SB Family
- js加密代码的分析[转]
- DFS+BFS(POJ3083)
- 机器学习——特征工程之特征选择
- 如何使用VS2012进行简单程序的DEBUG（入门级）
- apache 添加虚拟机
- DBeaver Column repay _ script _ sql is read-only : Nocorresponding table column问题
- sqp方法 matlab程序,matlab-program 基于matlab编写了SQP法 - 下载 - 搜珍网
- 稳定排序与不稳定排序方法
- java实现简易计算器，实现加减乘除，括号，算式查错，
- java 匿名类_浅谈Java的匿名类