Jquery冒泡机制

最新推荐文章于 2021-06-23 18:35:06 发布
最新推荐文章于 2021-06-23 18:35:06 发布
阅读量455 收藏
点赞数 2
分类专栏： eclipse java
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/yuwinter/article/details/68486430
版权
java 同时被 2 个专栏收录
23 篇文章 0 订阅
订阅专栏
eclipse
15 篇文章 0 订阅
订阅专栏 
<html>

	<head>
		<meta charset="UTF-8">
		<title>冒泡</title>
		<script type="text/javascript" src="js/jquery.min.js"></script>

		<script>
			$(function() {
				$("#parent").click(function() {
					$("#son").css({ "background": "red" })
				})
				$("#son").click(function() {
					$(this).stopPropagation();
					$("#parent").css({ "background": "blue" })
				})
		
				
			});
		</script>

	</head>

	<body>
		<div id="parent" style="width: 400px;height:300px;border: 1px solid red;">
			<div id="son" style="margin: 0 auto;width: 200px;height:200px;border: 1px solid blue;">
			</div>

		</div>

	</body>

</html>
例子：
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<script type="text/javascript" src="js/jquery.min.js" ></script>
		<script>
			
			$(function(){
			/*	$('tbody tr').click(function(){
					$(this).css({ "background": "red" });
				})*/
				// 冒泡机制 你机智了
				$(document).on("dblclick",".editInput",function(){
					var val=$(this).html();
					var ipt=$('<input   />');
					var _this=$(this);
					$(this).html(ipt);
					//$(this).html('<input  id="ddd" />');
					//$(this).html(ipt[0].outerHTML);
					ipt.val(val)
					ipt.focus();// 聚焦
					ipt.blur(function(){
						var v=$(this).val();
						if(v!=val){
							_this.html(v);
						   $(this).remove();
						}else{
							_this.html(v);
						   $(this).remove();
						}
						
						
					})// 失去 焦点
					
					//$("#dd").focus().val(val);
					//$(this).text('<input />'); 就是文本 不渲染标签
				})
				// 添加事件
				$('#add-btn').click(function(){
					var $tr='<tr><td>kk</td><td>11</td><td>男</td></tr>'
					$('table tbody').append($tr);
				})
			})
			
			
			
		</script>
		
	</head>
	<body>
	
	<div style="width: 300px;margin: 0 auto;">
		
		<button id="add-btn">添加</button>
		
	<table border="1">
	<thead >
		<tr>
			<td>姓名</td>
			<td>年龄</td>
			<td>性别</td>
		</tr>
		
	</thead>
		<tbody>
			<tr>
				<td class="editInput">kd</td>
				<td>18</td>
				<td>男</td>
			</tr>
			<tr>
				<td>kd</td>
				<td>18</td>
				<td>男</td>
			</tr>
			<tr>
				<td>kd</td>
				<td>18</td>
				<td>男</td>
			</tr>
			<tr>
				<td>kd</td>
				<td>18</td>
				<td>男</td>
			</tr>
			<tr>
				<td>kd</td>
				<td>18</td>
				<td>男</td>
			</tr>
			<tr>
				<td>kd</td>
				<td>18</td>
				<td>男</td>
			</tr>
			
		</tbody>
		
		
	</table>
		</div>
	</body>
</html>










                

        

        

    




    

      

        

            

              
                
                  yuwinter
                
              
            

            

                关注
              
            

        

        

          
    
            
  • 
              
                
                
                
                
                    2
                
              
              
    点赞
    
            
    • 
            
  • 
              
                
                
                
              
              
    踩
    
            
    • 
            
  • 
              
                
                
                
                
                    0
                
              
              
    
                
    
                  
                    收藏
                  
                
    
              
    
              
    
                
    
                  觉得还不错?
                  
                    一键收藏
                  
                 
                
    
              
    
            
    • 
          
  • 
            
    
              
              
            
    
              
              
              
                    0
              
            
            
    评论
    
          
    • 
          
  • 
          
    • 
          
  • 
            
              
            
              
    
            
              
                
            
    
          
    • 
        

      

      

            

                专栏目录
          










                



	

		

			

				
					
jquery图片冒泡提示效果

				
			

			

				

					06-10
				

			

		

		

			
				
该效果的核心在于利用jQuery的事件处理机制（如mouseover和mouseout）以及DOM操作方法来创建和控制提示框。首先，我们需要在HTML结构中为每张图片设置相应的数据属性，用来存储提示信息。例如：  ```html 这是图片的...

			
		

	



                

              
                



	

		

			

				
					
jQuery阻止事件冒泡具体实现

				
			

			

				

					10-26
				

			

		

		

			
				
总结起来，jQuery中的事件处理机制包括：  1. **事件冒泡**：事件从子元素向父元素逐级传播的过程。 2. **event.stopPropagation()**：阻止事件继续向上冒泡，确保事件只在当前元素上执行，不触发父元素的相同事件...

			
		

	



                


  
              

                


	

		

			

				
					
JQuery事件----冒泡机制的思考

				
			

			

				

					xinem的专栏
				

				

					02-22
					
					7874
					
				

			

		

		

			
				
当页面上发生一个事件时，每个层次上的DOM元素都有机会处理这个事件。             小小子欢迎您                这里至少还有我，小小子，存在~      举例来说，如果单击了页面中的超链接（锚元素），那么、和全都应该得到响应这次单击的机会。因为这三个元素毕竟都是在用户的鼠标指针之下啊。那么，最终响应的效果是什么样的呢

			
		

	





	

		

			

				
					
JQuery事件冒泡机制与解决

				
			

			

				

					Inuyasha1121的专栏
				

				

					05-20
					
					2482
					
				

			

		

		

			
				
一、什么是事件冒泡？
       当一个事件发生的时候，该事件总是有一个事件源，即引发这个事件的对象，一个事件不能凭空产生，这就是事件的发生。

当事件发生后，这个事件就要开始传播。为什么要传播呢？因为事件源本身并没有处理事件的能力。例如我们点击一个按钮时，就会产生一个click事件，但这个按钮本身不能处理这个事件（废话），事件必须从这个按钮传播出去，从而到达能够处理这个事件的代码中（例如

			
		

	



		

			
		



	

		

			

				
					
jQuery事件冒泡机制与解决

				
			

			

				

					爱代码也爱生活
				

				

					07-09
					
					4314
					
				

			

		

		

			
				
（1）什么是事件起泡 
首先你要明白一点，当一个事件发生的时候，该事件总是有一个事件源，即引发这个事件的对象，一个事件不能凭空产生，这就是事件的发生。 


当事件发生后，这个事件就要开始传播。为什么要传播呢？因为事件源本身并没有处理事件的能力。例如我们点击一个按钮时，就会产生一个click事件，但这个按钮本身不能处理这个事件（废话），事件必须从这个按钮传播出去，从而到达能够处理这个事件的

			
		

	





	

		

			

				
					
事件冒泡机制与委托机制，jQuery动态绑定

				
			

			

				

					大漠雁
				

				

					12-07
					
					5293
					
				

			

		

		

			
				
一次事件的完整过程包括三步：捕获 执行目标元素的监听函数 冒泡
事件冒泡机制与委托机制，jQuery动态绑定

			
		

	





	

		

			

				
					
Jquery 事件冒泡

				
			

			

				

					weixin_30258901的博客
				

				

					03-22
					
					118
					
				

			

		

		

			
				
原文链接http://blog.163.com/chtx87_98/blog/static/654011192011830928585/
原文链接二：http://hi.baidu.com/armyknife/blog/item/60ddc6c378b00847b219a81b.html
（1）什么是事件起泡首先你要明白一点，当一个事件发生的时候，该事件总是有一个事件源，即引发这个事件的对象，...

			
		

	





	

		

			

				
					
jQuery中阻止冒泡事件的方法介绍

				
			

			

				

					10-26
				

			

		

		

			
				
在JavaScript和jQuery中，事件冒泡是一个常见的概念，它指的是事件从最深的节点开始，沿着DOM树向上级节点传播，直到到达根节点的过程。这种机制使得事件可以在多个层次的元素上触发，允许我们对同一事件进行多次...

			
		

	





	

		

			

				
					
JQuery中阻止事件冒泡几种方式及其区别介绍

				
			

			

				

					10-26
				

			

		

		

			
				
在JavaScript和jQuery中，事件冒泡是一个常见的概念，它描述了事件从最深的DOM元素开始向上级元素传播的过程。这种机制允许事件处理程序在不同的层次上被触发，但有时我们可能希望阻止事件继续向上层元素传播。在...

			
		

	





	

		

			

				
					
jQuery的运行机制和设计理念分析

				
			

			

				

					10-28
				

			

		

		

			
				
3. **事件处理**：jQuery对事件处理进行了封装，提供了一致的事件绑定和解绑接口，同时支持事件冒泡和事件委托。  4. **动画效果**：jQuery的动画功能强大，可以轻松实现淡入淡出、滑动等效果，并支持自定义动画。  ...

			
		

	





	

		

			

				
					
jquery 事件冒泡、阻止事件冒泡 - event.stopPropagation()

				
			

			

				

					DevOps海洋的渔夫@专栏
				

				

					04-23
					
					849
					
				

			

		

		

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

			
		

	





	

		

			

				
					
什么是事件冒泡机制?

				
			

			

				

					sunhy007的博客
				

				

					06-23
					
					2827
					
				

			

		

		

			
				
什么是 事件冒泡？
冒泡的机制：


这气泡就相当于我们的事件，鱼就是事件源，而水则相当于我们的整个dom树；事件从dom 树的底层 层层往上传递，直至传递到dom的根节点。

栗子 :

样式布局



代码结构



js代码


<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" cont

			
		

	





	

		

			

				
					
JavaScript事件冒泡简介及应用

				
			

			

				

					weixin_30709635的博客
				

				

					08-23
					
					397
					
				

			

		

		

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

			
		

	





	

		

			

				
					
解析Javascript事件冒泡机制

					
热门推荐

				
			

			

				

					我的程序人生(亦山札记)
				

				

					04-18
					
					2万+
					
				

			

		

		

			
				
1.事件
2.冒泡

			
		

	





	

		

			

				
					
jQuery事件冒泡处理

				
			

			

				

					青椒盖饭的博客
				

				

					01-15
					
					3831
					
				

			

		

		

			
				

在大部分的情况下,往往会针对于一个ID组件绑定事件,基本不会有问题,但在jQuery里面也会存在有事件的冒泡处理.

观察冒泡处理
&lt;html&gt;
&lt;head&gt;
	&lt;meta charset="utf-8"/&gt;
	&lt;title&gt;jQuery的事件绑定处理&lt;/title&gt;
	&lt;script type="text/javascri

			
		

	





	

		

			

				
					
【动画】JQuery实现冒泡排序算法动画演示

				
			

			

				

					weixin_30512043的博客
				

				

					05-25
					
					313
					
				

			

		

		

			
				
1 前言
冒泡排序是大家最熟悉的算法，也是最简单的排序算法，因其排序过程很象气泡逐渐向上漂浮而得名。为了更好的理解其基本的思想，毛三胖利用JQuery实现了冒泡排序的动画演示,并计划陆续实现其它排序算法的动画演示。现将冒泡排序JQuery实现的基本思路和代码分享如下：
2 动画演示
2.1 演示地址
冒泡排序动画演示
2.2 30秒GIF
演示动画前30秒gif图，图片大小1.60M。

3 动画...

			
		

	





	

		

			

				
					
jquery冒泡事件

				
			

			

				

					HN.yz@ssg
				

				

					12-07
					
					839
					
				

			

		

		

			
				
原文：http://www.jb51.net/article/84908.htm




外层div元素 内层span元素





$(function() {
//为span元素绑定click事件
$('span').bind('click', function() {
var txt = $('#info').html() + '内层span元素被点击';
$(

			
		

	





	

		

			

				
					
算法系列之--冒泡算法及图解

				
			

			

				

					FeiPeng_的博客
				

				

					11-08
					
					1118
					
				

			

		

		

			
				
介绍    冒泡算法基本上是IT从业人员接触到的第一个算法，其原理就是依次对比相邻元素，大的放在后面，当全部                list遍历之后，该list的最大值就会被置换到list的最后，详细步骤如下：
     1. 比较相邻的元素。如果第一个比第二个大，就交换他们两个。
     2. 对每一对相邻元素作同样的工作，从开始第一对到结尾的最后一对。这步做完后，最后的元素会是最大的数

			
		

	





	

		

			

				
					
jquery实现事件冒泡

					
最新发布

				
			

			

				

					06-27
				

			

		

		

			
				
jQuery 是一个流行的 JavaScript 库，它简化了 JavaScript 对网页元素的操作，包括事件处理。事件冒泡是一种事件传播机制，在JavaScript中，当一个事件在某个元素上触发时，它会逐级向上穿透DOM树，直到达到文档的根元素。

在 jQuery 中，可以通过 `.on()` 方法来绑定事件并利用事件冒泡。例如，如果你想在点击一个按钮时也触发其父级元素的事件，可以这样做：

```javascript
// 绑定点击事件到按钮
$("#myButton").on("click", function(event) {
  // 处理按钮点击事件
  console.log("Button clicked");
});

// 由于事件冒泡，这个点击事件也会触发父元素的事件处理
// 如果父元素也绑定了 "click" 事件，这里会执行
$("#parentElement").on("click", function(event) {
  // 处理父元素点击事件
  console.log("Parent element clicked");
});
```

如果你想利用事件冒泡取消某个元素的默认行为，可以使用 `event.stopPropagation()`；如果想要阻止事件冒泡到父元素，则可以使用 `event.stopImmediatePropagation()`。



			
		

	



              



  
“相关推荐”对你有帮助么？

  

      
    
          
  • 
              
    
                  
                  
              
    
              
    非常没帮助
    
          
    • 
          
  • 
              
    
                  
                  
              
    
              
    没帮助
    
          
    • 
          
  • 
              
    
                  
                  
              
    
              
    一般
    
          
    • 
          
  • 
              
    
                  
                  
              
    
              
    有帮助
    
          
    • 
          
  • 
              
    
                  
                  
              
    
              
    非常有帮助
    
          
    • 
      

      

      

          
          提交
      

      

  




          




        



    





    



      

      

        
      

      





	

		评论	
	

	
	




  

    

      添加红包
      
    

    

      

        
        

          
          
        

        
请填写红包祝福语或标题

      

      

        
        

          
          个
        

        
红包个数最小为10个

      

      

        
        

          
          元
        

        
红包金额最低5元

      

      

        
        

          当前余额3.43元
          前往充值 >
        

      

      

        

          需支付：10.00元
        

        
        
      

    

  





  

    
    
  

  

    
    
  








  

    

      

        

          

            
            
成就一亿技术人!

          

          

        

        

          

          

            领取后你会自动成为博主和红包主的粉丝
            规则
          

        

      

      

        

          

            
              
            
            

              
hope_wisdom
 发出的红包
            

          

        

        

          

          

          

        

      

    

    

  



      
      

      
实付元

      
使用余额支付

      

        

          

            
            点击重新获取
          

        

        
扫码支付

      

      

        
          
            
          
          
        
      

      

        
        钱包余额
          0
          

            
            

              

                
抵扣说明：

                
 1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
 2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

              

            

          

      

      余额充值