js进阶 12-5 jquery中表单事件如何使用
js进阶 12-5 jquery中表单事件如何使用
一、总结
一句话总结：表单事件如何使用：可元素添加事件监听，然后监听元素，和javase里面一样。
1、表单获取焦点和失去焦点事件有哪两组？
注意是blur/focus和focus in/out，并没有给blur加什么
- blur() 当元素失去焦点时触发 blur 事件。
blur事件会在元素失去焦点的时候触发，既可以是鼠标行为，也可以是按tab键离开的
- focus() 当元素获得焦点时，触发 focus 事件。
- focusin()当元素获得焦点时，触发 focusin 事件。
focusin事件跟focus事件区别在于，他可以在父元素上检测子元素获取焦点的情况。
- focusout()当元素失去焦点时触发 focusout 事件。
focusout事件跟blur事件区别在于，他可以在父元素上检测子元素失去焦点的情况。
36 //具有获得焦点和失去焦点事件的元素有3个:单行文本框text；多行文本框textarea；下拉列表select；
37 // $('input').focus(function(){
38 // $(this).css('background','#ccc')
39 // })
40 // $('input').blur(function(){
41 // $(this).css('background','#fff')
42 // })
2、tab键可以触发blur事件么？
可以
3、focusin/focusout和focus/blur的区别是什么？
都是鼠标获取和失去焦点事件，但是
focusin事件跟focus事件区别在于，他可以在父元素上检测子元素获取焦点的情况。
focusout事件跟blur事件区别在于，他可以在父元素上检测子元素失去焦点的情况。
也就是说：用focusin/focusout监听表单元素的祖先，也可以input的样式情况，从而方便给祖先或者input设置样式
44 // $('p').focusin(function(){
45 // $(this).css('background','#ccc')
46 // })
47 // $('p').focusout(function(){
48 // $(this).css('background','#fff')
49 // })
50 $('div').focusin(function(){
51 $(this).css('background','#ccc')
52 })
53 $('div').focusout(function(){
54 $(this).css('background','#fff')
55 })
4、表单事件如何使用？
可元素添加事件监听，然后监听元素
给你需要监听的元素添加事件监听
37 // $('input').focus(function(){
38 // $(this).css('background','#ccc')
39 // })
5、focus/blur的监听对象是谁？
36 //具有获得焦点和失去焦点事件的元素有3个:单行文本框text；多行文本框textarea；下拉列表select；
6、focusin/focusout的监听对象是谁？
单行文本框text；多行文本框textarea；下拉列表select的父亲或者祖先
7、change()的监听对象是谁？
该事件仅适用于文本域（text field），以及 textarea 和 select 元素。当用于 select 元素时，change 事件会在选择某个选项时发生。
56 $('textarea').change(function(){
57 var str=$(this).val()
58 $('#num').text(str.length)
59 })
8、select()的监听对象是谁？
单行文本框text或多行文本框textarea的文本
60 $('textarea').select(function(){
61 alert('文本被选中')
62 })
9、submit()的监听对象是谁？
form表单
63 $('form').submit(function(){
64 alert('确定要提交吗？')
65 })
10、jquery中form表单事件有哪些？
焦点*4，change/select（文本框*2），表单*1
11、select()和selected的区别是什么？
前者是文本框字体选中事件，后者是多选择的某个选项是否被选中
二、jquery中表单事件如何使用
1、相关知识
表单事件
- blur() 当元素失去焦点时触发 blur 事件。
blur事件会在元素失去焦点的时候触发，既可以是鼠标行为，也可以是按tab键离开的
- focus() 当元素获得焦点时，触发 focus 事件。
- focusin()当元素获得焦点时，触发 focusin 事件。
focusin事件跟focus事件区别在于，他可以在父元素上检测子元素获取焦点的情况。
- focusout()当元素失去焦点时触发 focusout 事件。
focusout事件跟blur事件区别在于，他可以在父元素上检测子元素失去焦点的情况。
- change() 当元素的值发生改变时，会发生 change 事件。
该事件仅适用于文本域（text field），以及 textarea 和 select 元素。当用于 select 元素时，change 事件会在选择某个选项时发生。
- select() 当用户选中单行文本框text或多行文本框textarea的文本时，会触发select事件。
- submit() 当提交表单时，会发生 submit 事件。
2、代码
1 <!DOCTYPE html> 2 <html lang="en"> 3 <style> 4 </style> 5 <head> 6 <meta charset="UTF-8"> 7 <title>演示文档</title> 8 <script type="text/javascript" src="jquery-3.1.1.min.js"></script> 9 <style type="text/css"> 10 p{width: 40%}; 11 </style> 12 </style> 13 </head> 14 <body> 15 <h3>键盘事件-表单事件</h3> 16 <div> 17 <form action="#" id="myform"> 18 <p>姓名：<input type="text" id="user"></p> 19 <p>密码：<input type="password" id="passw"></p> 20 <p>建议：<textarea name="" id="tarea" cols="30" rows="10"></textarea> 21 <br>textarea中已经输入了<span id="num">0</span>个字符 22 </p> 23 <p> 24 <select id="sel"> 25 <option value="">AAA</option> 26 <option value="">BBB</option> 27 <option value="">CCC</option> 28 </select><br> 29 </p> 30 <p>附件：<input type="file" id="fil"></p> 31 <input type="submit" value="提交"> 32 </form> 33 </div> 34 <script type="text/javascript"> 35 $(function(){ 36 //具有获得焦点和失去焦点事件的元素有3个:单行文本框text；多行文本框textarea；下拉列表select； 37 // $('input').focus(function(){ 38 // $(this).css('background','#ccc') 39 // }) 40 // $('input').blur(function(){ 41 // $(this).css('background','#fff') 42 // }) 43 44 // $('p').focusin(function(){ 45 // $(this).css('background','#ccc') 46 // }) 47 // $('p').focusout(function(){ 48 // $(this).css('background','#fff') 49 // }) 50 $('div').focusin(function(){ 51 $(this).css('background','#ccc') 52 }) 53 $('div').focusout(function(){ 54 $(this).css('background','#fff') 55 }) 56 $('textarea').change(function(){ 57 var str=$(this).val() 58 $('#num').text(str.length) 59 }) 60 $('textarea').select(function(){ 61 alert('文本被选中') 62 }) 63 $('form').submit(function(){ 64 alert('确定要提交吗？') 65 }) 66 67 }) 68 </script> 69 </body> 70 </html>
