`

javascript事件冒泡

javascript事件冒泡 
阅读更多

昨天学习了一下javascript的冒泡，和大家分享在这里，有异议的请留言讨论。

 

什么是冒泡

简单的说就是触发一个子容器的事件，父容器的事件也会跟着被触发。

 

如下图：

 

Html代码 复制代码 收藏代码
  1. <div id="parentDiv" onclick="alert('parent');">       parent    
  2.       <div id="childDiv" onclick="alert('child');">child</div>  
  3.  </div>   

我们在child和parent上分别添加了alert('child')和alert('parent')事件，这个时候假如我们点击child，会先执行alert('child')，然后父元素的alert('parent')也会被执行，当然假如还有更多的层次，父级的事件会依次被触发，这就是冒泡。

 

但有些时候我么会不需要这样的机制，不如我们点击child只想触发child上的alert('child')事件，那么我们就要阻止冒泡的发生，做法如下。

 

如何阻止冒泡？

阻止冒泡有两种方法

e.cancelBubble=true;

e.stopPropagation();

 

据说e.stopPropagation();是针对firefox的，e.cancelBubble=true;是针对IE的。

但经过我测试了一下这两个方法在ie，firefox，opera，chrome上都可用，可能会根据版本有差异吧，大家自己判断吧

 

下面举个例子

 

Html代码 复制代码 收藏代码
  1. <div id="parentDiv" onclick="alert('parent');">  
  2.    parent   
  3.    <div id="childDiv" onclick="doSomething(this,event);">child</div>  
  4. </div>  

 

 

 

Js代码 复制代码 收藏代码
  1. function doSomething (obj,evt) {   
  2.     var e=evt||window.event;   
  3.     e.stopPropagation();   
  4. }  

 

因为在doSomething里阻止了冒泡，所以parentDiv上的alert('parent')事件也就不会被触发了。

 

如何利用冒泡？

当然有的时候我们还会利用一下冒泡，满足我们的需求，比如有很多个元素都要添加一个事件来处理某件事，但是假如把某个元素上都加上onclick的话，首先性能不说，这么多的代码也会让人嗤之以鼻，这就可以用到冒泡。

 

因为这些元素事件的触发都能够通过冒泡来触发他父亲的事件，那就只给他父亲加上事件吧，然后再判断确切是那个元素的时间被触发。然后你就可以为所欲为了。

 

例子：

 

Html代码 复制代码 收藏代码
  1. <table onclick="clicktd(event);" width="400" height="200" border="1">  
  2. <tr>  
  3. <td id="td1" width="25%">td1</td>  
  4. <td id="td2" width="25%">td2</td>  
  5. <td id="td3" width="25%">td3</td>  
  6. <td id="td4" width="25%">td4</td>  
  7. </tr>  
  8. </table>  
Js代码 复制代码 收藏代码
  1. function clicktd(e){   
  2.      e = e || window.event;   
  3. var obj =  e.target || e.srcElement;   
  4. alert(obj.id);   
  5. }  

这里主要是通过e.target 或e.srcElement(根据浏览器不同)获取确切的元素。接下来怎么做大家应该知道了。

 

 

最后来个例子的集合

 

 

Html代码 复制代码 收藏代码
  1. <html>  
  2.   <head>     
  3.   <style>  
  4.   #parentDiv{width:200px;height:200px;background:#666;}   
  5.   #childDiv{width:100px;height:100px;background: #06C; margin:50px;}   
  6.   </style>  
  7.   </head>  
  8.   <body>  
  9.      
  10.   没被阻止冒泡的：   
  11.     <div id="parentDiv" onclick="alert('parent');">  
  12.        parent    
  13.        <div id="childDiv" onclick="alert('child')">child</div>  
  14.     </div>  
  15.      
  16.   <br/>  
  17.   被阻止冒泡的：   
  18.     <div id="parentDiv" onclick="alert('parent');">  
  19.        parent    
  20.        <div id="childDiv" onclick="doSomething(this,event);">child</div>  
  21.     </div>  
  22.       
  23.     <br/>  
  24.     冒泡的应用：   
  25.     <table onclick="clicktd(event);" width="400" height="200" border="1">  
  26.     <tr>  
  27.     <td id="td1" width="25%">td1</td>  
  28.     <td id="td2" width="25%">td2</td>  
  29.     <td id="td3" width="25%">td3</td>  
  30.     <td id="td4" width="25%">td4</td>  
  31.     </tr>  
  32.     </table>  
  33.       
  34.     <script>  
  35.     function doSomething (obj,evt) {    
  36.         var e=evt||window.event;    
  37.         alert("child");   
  38.         e.stopPropagation();   
  39.        
  40. }    
  41.        
  42.     function clicktd(e){   
  43.         ee = e || window.event;   
  44.         var obj =  e.target || e.srcElement;   
  45.         alert(obj.id);   
  46.     }   
  47.     </script>  
  48.   </body>  
  49. </html>  
  • 大小: 1.7 KB
分享到：
| struts2.1.8,hibernate3.3.2,spring2.5 整 ...
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    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也会被触发， 触发的顺序是”由内而外”.验证:...

Magicbox
Global site tag (gtag.js) - Google Analytics