`

JavaScript事件冒泡

阅读更多

事件冒泡
在一个对象上触发某类事件(比如单击onclick事件),如果此对象定义了此事件的处理程序,那么此事件就会调用这个处理程序,如果没有定义此事件处理程序或者事件返回true,那么这个事件会向这个对象的父级对象传播,从里到外,直至它被处理(父级对象所有同类事件都将被激活),或者它到达了对象层次的最顶层,即document对象(有些浏览器是window)。

不是所有的事件都能冒泡。以下事件不冒泡:blur、focus、load、unload。
事件冒泡处理可能会激活我们本来不想激活的事件,导致程序错乱,所以必要时要阻止事件冒泡。

 

 

标准Event方法 --DOM事件标准(IE不支持)
stopPropagation() ---不在派发事件,阻止它被分派到其他 Document 节点,在事件传播的任何阶段都可以调用它。
ie属性--cancelBubble ---如果事件句柄想阻止事件传播到包容对象,属性设置为true

 

<script type="text/javascript">
//阻止事件冒泡后,你点击灰色盒子,整个过程只弹一次对话框了(注意与默认情况对比)
function showMsg(obj,e)
{
    alert(obj.id);
    stopBubble(e)
}
//阻止事件冒泡函数
function stopBubble(e)
{
    if (e && e.stopPropagation)
        e.stopPropagation()
    else
        window.event.cancelBubble=true
}
</script>
<body>
	<div onclick="showMsg(this,event)" id="outSide" style="background:#000;>
		<div onclick="showMsg(this,event)" id="inSide" style="background:#CCC">
		</div>
	</div>
</body>
   

http://www.cnblogs.com/webflash/archive/2010/01/10/1643580.html

 

分享到:
评论
1 楼 zhangyaochun 2012-03-31  
你的stopBubble 函数其实可以写成
function stopBubble(e) 

    if (e && e.stopPropagation) 
        e.stopPropagation() 
    else 
        e.cancelBubble=true   //区别在这

相关推荐

    JavaScript事件冒泡示例.html

    JavaScript事件冒泡是Web开发中的一个关键概念,它在网页交互和动态效果中扮演着重要角色。事件冒泡源于浏览器处理事件的方式,当一个事件(如点击、鼠标移动等)在一个元素上触发时,该事件会自底向上沿着DOM树...

    JavaScript事件冒泡与取消事件冒泡代码演示

    本段代码演示了如何使用JavaScript取消HTML事件的冒泡,即当后代元素的事件被触发时,祖先元素的相同事件也会被触发。代码中,页面包含一个div元素和一个嵌套在其中的span元素,分别设置了单击响应函数。当单击span...

    【JavaScript源代码】javascript事件冒泡,事件捕获和事件委托详解.docx

    JavaScript中的事件处理是Web开发中的核心概念,主要涉及事件冒泡、事件捕获以及事件委托。这三种机制在处理用户交互和DOM元素之间的事件时起着至关重要的作用。 1. **事件冒泡**:事件冒泡是事件处理的默认模式,...

    阻止滚动条事件冒泡

    要实现这个功能,我们需要理解JavaScript事件冒泡的概念。在DOM中,事件会从最深的节点开始向上层节点传播,直到到达文档的根节点,这个过程就称为事件冒泡。阻止事件冒泡可以避免一个事件被多次处理,提高性能,...

    javascript事件冒泡简单示例

    在下面的示例中,我们将详细探讨JavaScript中的事件冒泡、其原因以及如何阻止它。 事件冒泡是指事件从最深的DOM元素(即事件触发的元素)开始,然后逐级向上层元素传播事件。在这个过程中,每个节点都会接收到相同...

    Javascript 事件冒泡机制详细介绍

    Javascript中的事件冒泡机制是其事件处理模型的重要组成部分,它描述了当一个事件在DOM元素上发生时,这个事件不仅仅会在该元素上触发,还会向上逐级在父级元素中传播,直至到达DOM树的根部。这种机制允许开发者在...

    JavaScript 事件冒泡简介及应用

    JavaScript 事件冒泡是Web开发中的一个重要概念,它涉及到用户与网页交互时事件的处理方式。事件冒泡是指在一个对象上触发的事件会按照从内到外的顺序依次经过其所有父级元素,直到到达文档的根节点(通常是document...

    阻止JavaScript事件冒泡传递(cancelBubble 、stopPropagation)

    阻止JavaScript事件冒泡传递(cancelBubble 、stopPropagation) 在JavaScript事件处理机制中,事件冒泡传递是一个重要的概念。当一个元素触发某个事件时,该事件就会沿着DOM树向上传递,直到到达文档的根元素为止...

    JavaScript 事件冒泡应用实例分析

    JavaScript事件冒泡是DOM(文档对象模型)中事件处理的核心机制之一,它描述了事件从最深的DOM节点开始触发,然后逐级向上层节点传播的过程。在大型的Web交互项目,尤其是WebGame中,对事件冒泡的精确控制至关重要,...

    JavaScript事件冒泡机制原理实例解析

    JavaScript事件冒泡机制是Web开发中的一个重要概念,它描述了事件在DOM(文档对象模型)树中传播的顺序。在事件冒泡过程中,事件首先在最具体的元素(通常是触发事件的元素)上触发,然后逐级向上传播至最不具体的...

    javascript事件冒泡和事件捕获详解

    在探讨JavaScript事件冒泡和事件捕获之前,我们首先要了解什么是事件流。事件流指的是当事件发生在DOM树中的元素上时,事件处理的顺序。为了有效地组织事件处理程序,不同的浏览器厂商提出了不同的事件处理机制:...

    JavaScript事件冒泡与事件捕获实例分析

    本文实例讲述了JavaScript事件冒泡与事件捕获。分享给大家供大家参考,具体如下: 1、事件冒泡 在一个对象上触发某类事件,如onclick事件等,在其祖先节点上也会依次触发该事件。 &lt;body onclick=alert&#40;'body...

    JS事件冒泡浏览器兼容

    JavaScript事件冒泡是Web开发中的一个关键概念,它涉及到用户与网页交互时事件的传递机制。在浏览器环境中,事件冒泡是指事件从最深的节点开始,然后逐级向上层节点传播事件的过程。这个过程允许事件处理函数在不同...

    详解javascript事件冒泡

    事件冒泡是JavaScript中非常重要的一个概念,它描述了事件在DOM树结构中的传播方式。在事件冒泡过程中,一旦某个元素上的事件被触发,那么这个事件会从元素本身开始,沿着DOM树向上层元素传播,直到到达根节点。在此...

    javascript阻止事件冒泡的一种方法

    JavaScript中的事件冒泡是事件处理的一个重要概念,它是指事件开始时由最具体的元素(文档中嵌套层次最深的那个节点)接收,然后逐级向上转播至最不具体的节点(文档)的过程。这个机制允许事件在事件流的每个阶段都...

    javascript 中事件冒泡和事件捕获机制的详解

    javascript 中事件冒泡和事件捕获机制的详解 二者作用:描述事件触发时序问题 事件捕获:从document到触发事件的那个节点,即自上而下的去触发事件—由外到内 事件冒泡:自下而上的去触发事件—由内到外 绑定事件...

    javascript事件冒泡实例分析

    本文实例讲述了javascript事件冒泡。分享给大家供大家参考。具体分析如下: 事件冒泡:   如果元素A嵌套在元素B中,那么A被点击不仅A的onclick事件会被触发,B的onclick也会被触发, 触发的顺序是”由内而外”.验证:...

Global site tag (gtag.js) - Google Analytics