捕获和冒泡
把事件捕获和冒泡的过程统称为事件的传播
事件的传播是可以阻止的:
- 在W3c中,使用stopPropagation()方法
- 在IE下设置cancelBubble = true;
在捕获的过程中stopPropagation();后,后面的冒泡过程也不会发生了~ 在IE中则使用cancelBubble(IE中只有冒泡,没有捕获)
3.阻止事件的默认行为,例如click <a>后的跳转~
- 在W3c中,使用preventDefault()方法;
- 在IE下设置window.event.returnValue = false;
不是所有的事件都能冒泡,例如:blur、focus、load、unload,(这个是从别人的文章里摘过来的,我没测试)
JavaScript所有事件的两个阶段:捕获和冒泡
一下是一段简单的HTML代码
<body>
<ul>
<li>
click here
</li>
</ul>
</body>
JavaScript所有事件的两个阶段:捕获和冒泡
一下是一段简单的HTML代码
<body>
<ul>
<li>
click here
</li>
</ul>
</body>
如果我们点击了Li,则先回响应body的捕获事件,接下来就是ul li ,然后进入冒泡时间,顺序相反。
如果我们分别设置了响应函数,则会分别响应
我们可以阻止冒泡
function(e)
{
if (e && e.stopPropagation) // 支持W3C的stopPropation()方法 e.stopPropagation () else // 否则,我们得使用IE的方式来取消事件冒泡 window.event.cancelBubble = true;
}
事实上,捕获阶段是一个和冒泡阶段完全相反的过程,即事件由祖先元素向子元素传播,和一个石子儿从水面向水底下沉一样,要说明的是在IE,opera浏览器中,是不存在这个阶段的。从各浏览器提供的注册事件监听的方法中可见一斑,例如适用于ie,opera的attachEvent,有两个参数,attachEvent(”on”+type,fn),而适用于所谓标准浏览器的addEventListener则有三个参数,addEventListener(type,fn,boolean),前面两个参数不用解释,第三个参数boolean,就是决定注册事件发生在捕获阶段还是冒泡阶段,具体参考如下:
true : 捕获阶段
false : 冒泡阶段
对“捕获”和“冒泡”这两个概念,我想我们对冒泡更熟悉一些,因为在我们使用的所有浏览器中,都支持事件冒泡,即事件由子元素向祖先元素传播的,就像气泡从水底向水面上浮一样。而在像firefox,chrome,safari这类所谓的标准浏览器中,事件传播还有个阶段,那就是捕获阶段,这个很少有用武之地,所以被人疏忽遗忘也在所难免了,不常用不代表它不存在,本着科学严谨的态度,我们有必要去看一下它的庐山真面目。
分类:
前台javascript
【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 如何编写易于单元测试的代码
· 10年+ .NET Coder 心语,封装的思维:从隐藏、稳定开始理解其本质意义
· .NET Core 中如何实现缓存的预热?
· 从 HTTP 原因短语缺失研究 HTTP/2 和 HTTP/3 的设计差异
· AI与.NET技术实操系列:向量存储与相似性搜索在 .NET 中的实现
· 地球OL攻略 —— 某应届生求职总结
· 周边上新:园子的第一款马克杯温暖上架
· Open-Sora 2.0 重磅开源!
· 提示词工程——AI应用必不可少的技术
· .NET周刊【3月第1期 2025-03-02】
2014-07-23 跟我一起玩转Sencha Touch 移动 WebApp 开发(一)
2013-07-23 Hibernate的查询 HQL查询 查询某几列
2013-07-23 BoneCP学习笔记
2011-07-23 Android使用ksoap2调用C#webservice体会(转)