1. <!DOCTYPE html>
2. <html>
3. <head>
4. <meta charset="UTF-8">
5. <meta name="viewport" content="width=device-width, initial-scale=1.0">
6. <meta http-equiv="X-UA-Compatible" content="ie=edge">
7. <title>表单事件</title>
8. <style>
9.
10. </style>
11. </head>
12. <body>
13. <form action="">
14. <input type="text" name="" value="">
15. <input type="submit" value="提交">
16. <input type="reset" value="重置/清空数据">
17. </form>
18. <script>
19. var input = document.querySelector('input[type=text]')
20. input.addEventListener('focusin',function(){
21. // focusin获取焦点的时候触发
22. console.log('focusin')
23. })
24. input.addEventListener('focus',function(){
25. // focus获取焦点的时候触发
26. console.log('focus')
27. })
28.
29. input.addEventListener('focusout',function(){
30. console.log('focusout')
31. })
32. input.addEventListener('blur',function(){
33. console.log('blur')
34. })
35.
36. // focus/blur 支持较好
37. // 而focusin和focusout 支持不好（调用顺序不同）
38. // focus 指的是获取输入焦点
39. // blur 输入焦点离开
40.
41. input.addEventListener('change',function(){
42. console.log('change')
43. })
44. // 文本框失去焦点检查内容 如果内容发生了变化则触发change事件
45. // 如果希望在输入时立即检查则应使用其他方式
46.
47. input.addEventListener('select',function(){
48. console.log('selectd')
49. })
50. // 选择输入框内的文本时触发
51.
52. document.forms[0].addEventListener('submit',function(e){
53. if(input.value.length>0){
54. alert('可以提交')
55. }
56. else{
57. alert('请输入')
58. e.preventDefault()
59. // 阻止默认事件
60. }
61. })
62. // submit指表单提交之前 可以在这个事件中检查用户的输入是否合适
63. // 如果不合适则可以使用 event 的 preventDefaul() 来阻止表单提交
64.
65. document.forms[0].addEventListener('reset',function(e){
66. if(confirm('确定清空表单内容吗？')){
67. // confirm弹出一个确认框 确认框有两个按钮
68. // 点确定时confirm会返回true
69. // 点取消时confirm会返回false
70. }
71. else{
72. e.preventDefault()
73. // 可以阻止表单被清空
74. }
75. })
76. </script>
77. </body>
78. </html>