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冒泡问题
原文地址：http://www.cnblogs.com/zhangmingzhao/p/7476397.html