详解javascript事件冒泡
事件是javascript中的核心内容之一，在对事件的应用中不可避免的要涉及到一个重要的概念，那就是事件冒泡，在介绍事件冒泡之前，先介绍一下另一个重要的概念事件流：
一.什么是事件流:
文档对象模型（DOM）是一个树形结构，可以形象的用下图表示。
如果一个html元素触发事件，那么这个事件就会在DOM树中的触发节点和根节点之间按照一定的顺序传播，所有经过的节点都会接收到被触发的事件，这个传播过程被称之为事件流。按照事件的传播顺序，可以将其分为两类，一种是事件冒泡，一种是事件捕获，这里就涉及到本章要介绍的主题了：
1.事件冒泡:
所谓的时间冒泡就是当一个元素触发一个事件，事件会像是水泡一样，从触发元素向它的所有父节点传播，一直到根节点都会接收到此事件，如果父元素中注册了相应的事件处理函数，那么尽管事件在子节点触发的，在父元素上注册的事件处理函数同样会被触发。例如在上面图示中，如果触发a元素的onclick事件，那么它的父元素p、document和widow都会接收到此事件，并且如果在相应的父元素注册有时间处理函数，那么此事件处理函数将会执行，看一段代码实例:
<html>
<head>
<meta charset="utf-8"/>
<title>事件冒泡简单介绍</title>
<script type="text/javascript">
window.onload=function(){
var table=document.getElementById("mytable");
table.onclick=function(e){
var event=e||window.event;
target=event.srcElement||event.target;
alert(target.innerHTML);
}
}
</script>
</head>
<body>
<table width="400" border="1" id="mytable">
<tr>
<td>小牛知识库</td>
<td>小牛知识库</td>
<td>小牛知识库</td>
</tr>
<tr>
<td>小牛知识库</td>
<td>小牛知识库</td>
<td>小牛知识库</td>
</tr>
<tr>
<td>小牛知识库</td>
<td>小牛知识库</td>
<td>小牛知识库</td>
</tr>
</table>
</body>
</html>
以上代码的目的是，当点击相应的单元格的时候就会弹出对应单元格中的内容。但是在上面的实现中并不是为每一个单元格注册onclick事件处理函数，而是将onclick事件处理函数注册于单元格的父元素table上，当点击单元格的时候会触发onclick事件，事件还会从从事件对象向上传播，而table元素恰好有注册的onclick事件处理函数，这个时候就会执行此处理函数，当然这里会设置到传递事件对象参数的问题。所有的浏览器都支持事件冒泡。二.事件捕获:
事件捕获和事件冒泡恰好相反，当点击一个元素的时候，事件传播的方向是从根元素到触发元素，IE浏览器并不支持，为了跨浏览器支持，所以默认情况下一般都是使用冒泡型事件处理模型。
2.javascript阻止事件冒泡代码
事件冒泡在某些场景非常的有用，但是有时候也是必须要阻止，下面是一段能够兼容所有主流浏览器的阻止事件冒泡的实例代码。
代码实例:
function stopBubble(e)
{
if(e&&e.stopPropagation)
{
e.stopPropagation();
}
else
{
window.event.cancelBubble=true;
}
}
以上代码可以阻止事件冒泡，下面对代码做一下简单注释:
二、代码注释:
- 1.function stopBubble(e) {}，此函数用来阻止事件冒泡，参数是个事件对象。
- 2. if(e&&e.stopPropagation){e.stopPropagation();}，判断是否支持stopPropagation，如果支持就使用e.stopPropagation()。stopPropagation()函数IE10和IE10以下浏览器不支持。
- 3.window.event.cancelBubble=true，当前IE浏览器使用这个可以阻止事件冒泡。
以上就是关于javascript事件冒泡的详细介绍，希望对大家的学习有所帮助。
-
本文向大家介绍Javascript 事件冒泡机制详细介绍，包括了Javascript 事件冒泡机制详细介绍的使用技巧和注意事项，需要的朋友参考一下 1. 事件 在浏览器客户端应用平台，基本生都是以事件驱动的，即某个事件发生，然后做出相应的动作。 浏览器的事件表示的是某些事情发生的信号。事件的阐述不是本文的重点，尚未了解的朋友，可以访问W3school教程 进行了
-
主要内容：事件捕获,事件冒泡,阻止事件捕获和冒泡,阻止默认操作在 JavaScript 中，我们将事件发生的顺序称为“事件流”，当我们触发某个事件时，会发生一些列的连锁反应，例如有如下所示的一段代码： 如果给每个标签都定义事件，当我们点击其中的 标签时，会发现绑定在 和 标签上的事件也被触发了，这到底是为什么呢？为了解答这一问题，微软和网景两公司提出了两种不同的概念，事件捕获与事件冒泡： 事件捕获：由微软公司提出，事件从文档根节点（Document 对象）流
-
本文向大家介绍js事件冒泡、事件捕获和阻止默认事件详解，包括了js事件冒泡、事件捕获和阻止默认事件详解的使用技巧和注意事项，需要的朋友参考一下 谈起JavaScript的 事件，事件冒泡、事件捕获、阻止默认事件这三个话题，无论是面试还是在平时的工作中，都很难避免。 1.事件冒泡 先来看一段代码： html代码 你的本意是触发button这个元素，却连同父元素绑定的事件一同触发。这就是事件冒泡。 如
-
本文向大家介绍理解jquery事件冒泡，包括了理解jquery事件冒泡的使用技巧和注意事项，需要的朋友参考一下 一、什么是jquery事件冒泡 在很多教材或者手册都可能会涉及到事件冒泡的概念，老手来说这当然是最基本的概念，但往往对于初学者可能比较陌生或者说从来没有听说过。下面就结合代码实例来简单介绍一下什么是事件冒泡。 代码实例如下: 在以上代码中，我们可能只想点击锚点后弹出“我是third”，但
-
本文向大家介绍Javascript冒泡排序算法详解，包括了Javascript冒泡排序算法详解的使用技巧和注意事项，需要的朋友参考一下 比较相邻的元素。如果第一个比第二个大，就交换他们两个。 对每一对相邻元素作同样的工作，从开始第一对到结尾的最后一对。在这一点，最后的元素应该会是最大的数。 针对所有的元素重复以上的步骤，除了最后一个。 持续每次对越来越少的元素重复上面的步骤，直到没有任何一对数字需
-
本文向大家介绍JavaScript事件冒泡机制原理实例解析，包括了JavaScript事件冒泡机制原理实例解析的使用技巧和注意事项，需要的朋友参考一下 这篇文章主要介绍了JavaScript事件冒泡机制原理实例解析,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下 DOM事件流（event flow ）存在三个阶段：事件捕获阶段、处于目标阶段、事件冒