jQuery冒泡问题
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了jQuery冒泡问题相关的知识，希望对你有一定的参考价值。
jQuery表单事件之blur与focus事件
我们学过了表单处理事件focusin事件与focusout事件，同样用于处理表单焦点的事件还有blur与focus事件
它们之间的本质区别:
是否支持冒泡处理
举个简单的例子
<div> <input type="text" /> </div>
其中input元素可以触发focus()事件
div是input的父元素，当它包含的元素input触发了focus事件时，它就产生了focusin()事件。
focus()在元素本身产生，focusin()在元素包含的元素中产生
blur与focusout也亦是如此
具体参考下案例，给出来的区别
1 <!DOCTYPE html> 2 <html> 3 4 <head> 5 <meta http-equiv="Content-type" content="text/html; charset=utf-8" /> 6 <title></title> 7 <style> 8 .left div, 9 .right div { 10 width: 500px; 11 height: 50px; 12 padding: 5px; 13 margin: 5px; 14 float: left; 15 border: 1px solid #ccc; 16 } 17 18 .left div { 19 background: #bbffaa; 20 } 21 22 .right div { 23 background: yellow; 24 } 25 </style> 26 <script src="http://libs.baidu.com/jquery/1.9.1/jquery.js"></script> 27 </head> 28 29 <body> 30 <h4>.focusin与blur</h4> 31 <div class="left"> 32 <div class="aaron"> 33 点击触发焦点(无反应)： 34 <input type="text" /> 35 </div> 36 <div class="aaron1"> 37 点击触发焦点并冒泡： 38 <input type="text" /> 39 </div> 40 </div> 41 <script type="text/javascript"> 42 $(".aaron").focus(function() { 43 $(this).css(‘border‘, ‘2px solid red‘) 44 }) 45 $(".aaron1").focusin(function() { 46 $(this).find(‘input‘).val(‘冒泡捕获了focusin事件‘) 47 }) 48 </script> 49 50 51 <h4>.focusout与blur</h4> 52 <div class="right"> 53 <div class="aaron3"> 54 点击触发失去焦点(无反应)： 55 <input type="text" /> 56 </div> 57 <div class="aaron4"> 58 点击触发失去焦点并冒泡： 59 <input type="text" /> 60 </div> 61 </div> 62 <script type="text/javascript"> 63 $(".aaron3").blur(function() { 64 $(this).css(‘border‘, ‘2px solid red‘) 65 }) 66 $(".aaron4").focusout(function() { 67 $(this).find(‘input‘).val(‘冒泡捕获了focusout事件‘) 68 }) 69 70 </script> 71 72 </body> 73 74 </html>
解释1：
你们看focus和blur事件都绑到了div上，你点击input或者点完移开失去焦点当然没反应了，因为input没有绑定事件啊。
而focusin和focuout也绑在div上，为啥有反应呢？
因为后者在你点input的时候会一级一级的往上面查父元素，如果父元素有事件就执行了，所以你看到了效果。这叫事件冒泡。
为啥前者不行呢？因为前者不支持事件冒泡。
解释2：
这里的例子有点绕，总的来说就是从效果上来说，都是在获取或失去焦点时产生事件，并可以绑定处理函数。
区别就在于focus和blur只能在input之类的表格元素本身上起效，当在他的父级元素上绑focus和blur事件时，因为它俩不冒泡，所以在外部的绑定其实是没有效果的。
而focusin和focusout可以冒泡，所以就算是在父级绑定的这两个事件，只要是内部元素触发了获得和失去焦点的事件，一样可以冒泡出来，让父级元素绑定的事件捕获到，从而执行命令。
以上是关于jQuery冒泡问题的主要内容，如果未能解决你的问题，请参考以下文章