JavaScript中的事件冒泡机制
事件冒泡机制
事件冒泡发生的条件：当为多个嵌套的元素设置了相同的事件处理程序，它们将触发事件冒泡机制。在事件冒泡中，最内部的元素将首先触发其事件，然后是栈内的下一个元素触发该事件，以此类推，直到到达最外面的元素。如果把事件处理程序指定给所有的元素，那么这些事件将依次触发。
举个例子：
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>事件冒泡</title>
<script src="demo2.js"></script>
</head>
<body>
<div id = "first" style="padding : 20px;background-color: #ff0;width: 150px;">
<div id="second" style="background-color :#f00;width:100px;height:100px;border :1px dashed #000"></div>
</div>
</body>
</html>
//demo2.js
window.onload = setupEvents; function setupEvents(){
document.getElementById("first").onmousedown=function(){
alert("first element event");
} document.getElementById("second").onmousedown=function(){
alert("second element event");
} document.onmousedown=function(){
alert("document event");
}
}
如果单击最里面的div元素，不论在什么浏览器中将弹出三个警告窗口，依次显示：
1.Second element event
2.First element event
3.Document event
取消事件冒泡机制
如果你有一个元素堆栈，且只希望一个元素触发该事件处理程序，可以取消事件冒泡机制。IE中的属性：cancelBubble，Mozila中的属性：stopPropagation。代码如下：
function stopEvent(evnt){
if(evnt.stopPropagation){
evnt.stopPropagation();
}else{
evnt.cancelBubble = ture;
}
}
现在修改demo2.js中的first id的js代码：
//demo2.js
window.onload = setupEvents; function setupEvents(){
// document.getElementById("first").onmousedown=function(){
// alert("first element event");
// }
//
document.getElementById("first").onmousedown=function(evnt){
var theEvent = evnt ? evnt :window.event;
alert("first element event");
stopEvent(theEvent);
} document.getElementById("second").onmousedown=function(){
alert("second element event");
} document.onmousedown=function(){
alert("document event");
}
} function stopEvent(evnt){
if(evnt.stopPropagation){
evnt.stopPropagation();
}else{
evnt.cancelBubble = ture;
}
}
然后试验，你会发现最后一个针对文档事件处理程序的警告窗口将不会影响，因为在时间到达栈顶之前，事件已经取消了。
JavaScript中的事件冒泡机制的更多相关文章
- JavaScript中的事件循环机制跟函数柯里化
一.事件循环机制的理解 test();//按秒输出5个5 function test() { for (var i = 0; i < 5; i++) { setTimeout(() => ...
- javascript中的事件冒泡、事件捕获和事件执行顺序
谈起JavaScript的 事件,事件冒泡.事件捕获.阻止默认事件这三个话题,无论是面试还是在平时的工作中,都很难避免. DOM事件标准定义了两种事件流,这两种事件流有着显著的不同并且可能对你的应用有 ...
- JavaScript中的事件委托机制跟深浅拷贝
今天聊下JavaScript中的事件委托跟深浅拷贝 事件委托 首先呢,介绍一下事件绑定 //方法一:通过onclick <button onclick="clickEvent()&qu ...
- Javascript中的事件冒泡与捕获
事件冒泡和事件捕获 起因:今天在封装一个bind函数的时候,发现el.addEventListener函数支持第三个参数,useCapture:是否使用事件捕获,觉得有点模糊 Js事件流 页面的哪一部 ...
- JavaScript中的事件冒泡？事件传播的解释
注:本文来源 可译网 事件冒泡是你在学习javaScript旅途中遇到的一个术语,它涉及到当一个元素被另一个元素嵌套时调用事件处理的顺序,并且两个元素注册了同一个事件(例如,点击事件). 但是事件冒 ...
- javascript中的事件冒泡和事件捕获
1.事件冒泡 IE 的事件流叫做事件冒泡(event bubbling),即事件开始时由最具体的元素(文档中嵌套层次最深的那个节点)接收,然后逐级向上传播到较为不具体的节点(文档).以下面的HTML ...
- JavaScript 进阶教程一 JavaScript 中的事件流 - 事件冒泡和事件捕获
先看下面的示例代码: <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Jav ...
- 解析Javascript事件冒泡机制
本资源引自: 解析Javascript事件冒泡机制 - 我的程序人生 - 博客频道 - CSDN.NET http://blog.csdn.net/luanlouis/article/details/ ...
- javascript 中的事件机制
1.javascript中的事件. 事件流 javascript中的事件是以一种流的形式存在的. 一个事件会也有多个元素同时响应. 有时候这不是我们想要的效果, 我们只是需要某个特定的元素相应我们的绑 ...
随机推荐
- SaaS系列介绍之十一: SaaS商业模式分析
1 配置模式 中国企业很多是人治,管理弹性非常大,公司的政策经常变化,管理流程.业务变化也非常大,发展也非常快;一个公司今年是10个人,明年是100个人,后年可能是1000人.管理机制.方法处于经常变 ...
- Hibernate逍遥游记-第12章 映射值类型集合-001映射set(<element>)
1. 2. <?xml version="1.0"?> <!DOCTYPE hibernate-mapping PUBLIC "-//Hibernate ...
- esriFeatureType与esriGeometryType的区别与联系
esriFeatureType通常用来表示数据的存储结构,即物理层: esriGeometryType通常用来表示数据的几何形状,即表现层. esriGeometryType枚举类型详解 常量 值 对 ...
- jQuery-瀑布流-浮动布局（一
jQuery-瀑布流-浮动布局(一)(延迟AJAX加载图片) 瀑布流:这种布局适合于小数据块,每个数据块内容相近且没有侧重.通常,随着页面滚动条向下滚动,这种布局还会不断加载数据块并附加至当前尾部 ...
- 使用 GIT 获得Linux Kernel的代码并查看，追踪历史记录
Linux kernel 的官方 GIT地址是: http://git.kernel.org/cgit/linux/kernel/git/stable/linux-stable.git 可以从这个地 ...
- 启动PL/SQL Developer 报字符编码不一致错误 Database character set (AL32UTF8) and Client character set (ZHS16GBK) are different. Character set conversion may cause unexpected results. Note: you can set the client
今天写hibernate时候遇到一些异常 代码: 出现异常情况: 出现以上原因是Session关闭 如果不是使用的SessionFactory.getSession()来获得Session. 而是使用 ...
- Reactor模式，或者叫反应器模式
Reactor这个词译成汉语还真没有什么合适的,很多地方叫反应器模式,但更多好像就直接叫reactor模式了,其实我觉着叫应答者模式更好理解一些.通过了解,这个模式更像一个侍卫,一直在等待你的召唤,或 ...
- UVa 10943 (数学 递推) How do you add?
将K个不超过N的非负整数加起来,使它们的和为N,一共有多少种方法. 设d(i, j)表示j个不超过i的非负整数之和为i的方法数. d(i, j) = sum{ d(k, j-1) | 0 ≤ k ≤ ...
- PhoneGap 安装体验
npm -v #显示版本,检查npm 是否正确安装. npm install express #安装express模块 npm install -g express #加上 -g 启用global安装 ...
- Android ashmem hacking
/********************************************************************** * Android ashmem hacking * 声 ...