什么是JS事件冒泡？
什么是JS事件冒泡？：
在一个对象上触发某类事件（比如单击onclick事件），如果此对象定义了此事件的处理程序，那么此事件就会调用这个处理程序，如果没有定义此事件处理 程序或者事件返回true，那么这个事件会向这个对象的父级对象传播，从里到外，直至它被处理（父级对象所有同类事件都将被激活），或者它到达了对象层次的最顶层，即document对象（有些浏览器是window）。
附一张图：
如何来阻止Js事件冒泡？
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>事件冒泡</title>
<style type="text/css">
#divOne{
width: 100px;
height: 100px;
border: 1px solid red;
}
#divTwo{
width: 200px;
height: 200px;
border: 1px solid red;
}
</style>
</head>
<body>
<div id="divOne" onclick="alert('我是最外层');">
<div id="divTwo" onclick="alert('我是中间层！')">
<a id="hr_three" href="http://www.baidu.com" onclick="alert('我是最里层！')">点击我</a>
</div>
</div>
</body>
</html>
比如上面这个页面，
分为三层：divOne是第外层，divTwo中间层，hr_three是最里层;
他们都有各自的click事件，最里层a标签还有href属性。
运行页面，点击“点击我”,会依次弹出：我是最里层---->我是中间层---->我是最外层---->然后再链接到百度.
这就是事件冒泡，本来我只点击ID为hr_three的标签，但是确执行了三个alert操作。
事件冒泡过程（以标签ID表示）：hr_three----> divTwo----> divOne 。从最里层冒泡到最外层。
如何来阻止冒泡?
event.stopPropagation();
<script type="text/javascript">
//.event.stopPropagation();
window.onload = function (){
var hr_three = document.getElementById('hr_three');
hr_three.addEventListener('click',fn,false);
} function fn(event){
event.stopPropagation();
} </script>
再点击“点击我”，会弹出：我是最里层，然后链接到百度
如何来阻止默认?
event.preventDefault();
<script type="text/javascript">
//2.event.preventDefault();
window.onload = function (){
var hr_three = document.getElementById('hr_three');
hr_three.addEventListener('click',fn,false);
} function fn(event){
event.preventDefault();
} </script>
再点击“点击我”，会发现它依次弹出：我是最里层---->我是中间层---->我是最外层，但最后却没有跳转到百度.
它的作用是：事件处理过程中，不阻击事件冒泡，但阻击默认行为（它只执行所有弹框，却没有执行超链接跳转）
什么是JS事件冒泡？的更多相关文章
- js事件冒泡和事件委托
js事件冒泡 js所谓的事件冒泡就是子级元素的某个事件被触发,它的上级元素的该事件也被递归执行 html: <ul class="clearfix" data-type=&q ...
- 什么是JS事件冒泡
什么是JS事件冒泡? 在一个对象上触发某类事件(比如单击onclick事件),如果此对象定义了此事件的处理程序,那么此事件就会调用这个处理程序,如果没有定义此事件处理程序或者事件返回true,那么这个 ...
- 阻止JS事件冒泡传递（cancelBubble 、stopPropagation）
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1.aspx. ...
- js事件冒泡和捕捉
(1)冒泡型事件:事件按照从最特定的事件目标到最不特定的事件目标(document对象)的顺序触发. IE 5.5: div -> body -> document IE 6.0: div ...
- 这可能是最简明扼要的 js事件冒泡机制+阻止默认事件 讲解了
哎 js事件冒泡机制和阻止冒泡 阻止默认行为好像永远也整不清楚,记了忘 忘了记...醉了 这篇文章写完以后下次再忘记 就呼自己一巴掌,忘一次一巴掌 首先要明白两个概念——事件和事件流 事件指的是用户或 ...
- 理解js事件冒泡事件委托事件捕获
js事件冒泡 javascript的事件传播过程中,当事件在一个元素上出发之后,事件会逐级传播给先辈元素,直到document为止,有的浏览器可能到window为止,这就是事件冒泡现象. <di ...
- js 事件冒泡、事件捕获、stopPropagation、preventDefault
转自:http://www.jb51.net/article/42492.htm (1)冒泡型事件:事件按照从最特定的事件目标到最不特定的事件目标(document对象)的顺序触发. IE 5.5: ...
- JS事件冒泡及阻止
事件冒泡及阻止 当一个元素接收到事件的时候,会把他接收到的事件传给自己的父级,一直到window,当然其传播的是事件,绑定的执行函数并不会传播,如果父级没有绑定事件函数,就算传递了事件,也不会有什么表 ...
- 关于JS 事件冒泡和onclick,click,on()事件触发顺序
今天在给JQgrid中的标签添加click事件的时候,发现一个问题. JQgrid的table中,点击任何位置,都会勾选点击行的checkbox,而我希望在点击我的标签的时候,不要勾选checkbox ...
随机推荐
- iOS--高级技术
1.iOS---搜索功能 2.iOS--通讯录.蓝牙.内购.GameCenter.iCloud.Passbook等系统服务开发汇总 3.iOS-技巧性总结 4.iOS-调试技巧 5.iOS-即时通讯- ...
- nodejs处理url工具
url模块提供3个方法:parse,format,resolve 1.parse 要先引入url模块 >url.parse('http://www.cnblogs.com/cate/108703 ...
- JavaScript权威设计--JavaScript对象(简要学习笔记七)
1.with语句 语法: width(object){ statement } with语句可用于临时扩展作用域链.作用域链可以按序检索的对象列表,通过它可以进行变量名解析. with将object添 ...
- 注意 AppResLib.dll.*.mui 的生成操作应该为 Content
为 Windows Phone 8 App 添加本地化的时候,发现修改 AppResLib.dll.*.mui 后不仅没有其变化,还发现修改它导致它失效.通过对比代码发现,问题原因是 AppResLi ...
- [占位-未完成]scikit-learn一般实例之十一:异构数据源的特征联合
[占位-未完成]scikit-learn一般实例之十一:异构数据源的特征联合 Datasets can often contain components of that require differe ...
- javascript编程杂记
1.数组深复制 var obj =[1,2,4]: var obj2 = obj.slice(0);
- Entity Framework 教程——什么是Entity Framework
什么是Entity Framework 编写和管理ADO.NET是一个繁琐而又无聊的工作.微软为你的应用提供了一个名为"Entity Framework"的ORM框架来自动化管理你 ...
- 在公有云AZURE上部署私有云AZUREPACK以及WEBSITE CLOUD(五)
(五)注册Website Cloud 1 注册Website Cloud 添加Website Cloud 连接Website Cloud 注意, endpoint 是使用Management Se ...
- ubuntu学习的简单笔记
l vi编辑器开发步骤 A)输入 vi Hello.java B) 输入 i 插入模式. C)输入 冒号.[保存退出:wq][退出不保存:q!] l 列出当前目录的所有文件:ls 详细信息的列表:ls ...
- HTML5简介
HTML5简介 HTML5是HTML的最新修订标准.2014年10月29日,万维网联盟(W3C)宣布,经过8年的努力,HTML5标准规范制定完成. HTML5的设计目的是在移动设备上使用多媒体. HT ...