<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript">
window.onload= function() {
document.getElementById('hr_three').onclick=function(event) {
event.stopPropagation();
alert('我是最里层！');
};
}
</script>
</head>
<body>
<div id="divOne" onclick="alert('我是最外层');" style="border:1px solid gray;padding:8px;">
<div id="divTwo" onclick="alert('我是中间层！')" style="border:1px solid red;padding:8px;">
<a id="hr_three" href="http://www.baidu.com" mce_href="http://www.baidu.com">点击我</a>
</div>
</div>
</body>
</html>
通过以上方式我们可以处理，当我们在子节点和父节点上都注册同一类事件时，子类事件的触发不会影响到父类事件，冒泡是由内向外的
什么是JS事件冒泡？：
在一个对象上触发某类事件（比如单击onclick事件），如果此对象定义了此事件的处理程序，那么此事件就会调用这个处理程序，如果没有定义此事件处理程序或者事件返回true，那么这个事件会向这个对象的父级对象传播，从里到外，直至它被处理（父级对象所有同类事件都将被激活），或者它到达了对象层次的最顶层，即document对象（有些浏览器是window）。
以下代码就会一直向上冒泡：
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript">
/*window.onload= function() {
document.getElementById('hr_three').onclick=function(event) {
event.stopPropagation();
alert('我是最里层！');
};
}*/
</script>
</head>
<body>
<div id="divOne" onclick="alert('我是最外层');" style="border:1px solid gray;padding:8px;">
<div id="divTwo" onclick="alert('我是中间层！')" style="border:1px solid red;padding:8px;">
<a id="hr_three" href="http://www.baidu.com" mce_href="http://www.baidu.com" onclick="">点击我</a>
</div>
</div>
</body>
</html>
写道
http://blog.sina.com.cn/s/blog_a322154901015qkk.html
相关推荐
JavaScript事件冒泡是Web开发中的一个关键概念，它涉及到用户与网页交互时事件的传递机制。在浏览器环境中，事件冒泡是指事件从最深的节点开始，然后逐级向上层节点传播事件的过程。这个过程允许事件处理函数在不同...
JavaScript事件冒泡是Web开发中的一个关键概念，它在网页交互和动态效果中扮演着重要角色。事件冒泡源于浏览器处理事件的方式，当一个事件（如点击、鼠标移动等）在一个元素上触发时，该事件会自底向上沿着DOM树...
要实现这个功能，我们需要理解JavaScript事件冒泡的概念。在DOM中，事件会从最深的节点开始向上层节点传播，直到到达文档的根节点，这个过程就称为事件冒泡。阻止事件冒泡可以避免一个事件被多次处理，提高性能，...
JavaScript中的事件冒泡是事件处理的一个重要概念，它是指事件开始时由最具体的元素（文档中嵌套层次最深的那个节点）接收，然后逐级向上转播至最不具体的节点（文档）的过程。这个机制允许事件在事件流的每个阶段都...
本段代码演示了如何使用JavaScript取消HTML事件的冒泡，即当后代元素的事件被触发时，祖先元素的相同事件也会被触发。代码中，页面包含一个div元素和一个嵌套在其中的span元素，分别设置了单击响应函数。当单击span...
JavaScript 事件冒泡是Web开发中的一个重要概念，它涉及到用户与网页交互时事件的处理方式。事件冒泡是指在一个对象上触发的事件会按照从内到外的顺序依次经过其所有父级元素，直到到达文档的根节点（通常是document...
JavaScript中的事件处理是Web开发中的核心概念，主要涉及事件冒泡、事件捕获以及事件委托。这三种机制在处理用户交互和DOM元素之间的事件时起着至关重要的作用。 1. **事件冒泡**：事件冒泡是事件处理的默认模式，...
在JavaScript中，事件冒泡是一种事件处理机制，它描述了事件如何从最深的节点（事件实际发生的元素）向上逐级传播到最不深的节点（即包含它的所有祖先元素）。当在某个元素上触发一个事件时，该事件会首先在这个元素...
### JS 事件冒泡原理与应用 #### 一、事件冒泡的概念 在JavaScript中，事件冒泡是指事件处理程序从最内层元素开始触发，然后逐级向上传播到最外层元素的过程。这种机制使得事件可以在DOM树中沿着元素层次向上冒泡...
在一些传统的小型WEB应用开发过程中，JavaScript通常只是拿来做表单验证而以，所以你很少会遇到因为JavaScript事件冒泡而影响功能的实现情况，又或者事件冒泡对最终实现效果影响不大，可忽略。
这篇文章主要介绍了JavaScript事件冒泡机制原理实例解析,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下 DOM事件流（event flow ）存在三个阶段：事件捕获阶段...
在JavaScript的DOM编程中，事件冒泡是一个非常重要的概念，尤其在处理多级嵌套元素的事件时。事件冒泡是指事件开始时由最具体的元素（文档中嵌套层次最深的那个节点）接收，然后逐级向上转播至最不具体的节点（文档...
在JavaScript编程中，事件处理是不可或缺的一部分，尤其是事件冒泡（Event Bubbling）机制，它是理解DOM（Document Object Model）事件处理的关键概念之一。事件冒泡是指事件开始时由最具体的元素（文档中嵌套层次...
Javascript中的事件冒泡机制是其事件处理模型的重要组成部分，它描述了当一个事件在DOM元素上发生时，这个事件不仅仅会在该元素上触发，还会向上逐级在父级元素中传播，直至到达DOM树的根部。这种机制允许开发者在...
在下面的示例中，我们将详细探讨JavaScript中的事件冒泡、其原因以及如何阻止它。 事件冒泡是指事件从最深的DOM元素（即事件触发的元素）开始，然后逐级向上层元素传播事件。在这个过程中，每个节点都会接收到相同...
事件冒泡是JavaScript中非常重要的一个概念，它描述了事件在DOM树结构中的传播方式。在事件冒泡过程中，一旦某个元素上的事件被触发，那么这个事件会从元素本身开始，沿着DOM树向上层元素传播，直到到达根节点。在此...
javascript 中事件冒泡和事件捕获机制的详解 二者作用：描述事件触发时序问题 事件捕获：从document到触发事件的那个节点，即自上而下的去触发事件—由外到内 事件冒泡：自下而上的去触发事件—由内到外 绑定事件...
JavaScript中的事件冒泡是事件处理的一个重要机制，它是指事件从最深的DOM节点开始，然后逐级向上层节点传播事件的过程。例如，在一个父容器内有子元素的情况下，如果子元素和父元素都绑定了点击事件处理函数，当你...