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可以冒泡，所以就算是在父级绑定的这两个事件，只要是内部元素触发了获得和失去焦点的事件，一样可以冒泡出来，让父级元素绑定的事件捕获到，从而执行命令。
时间： 2024-11-02 23:28:06