WEB前端初学者笔记（16）--表单事件
作者：互联网
一、表单事件
1.常用事件
在JavaScript中，常用的表单事件有3种。
- （1）onfocus和onblur
- （2）onselect
- （3）onchange
2.onfocus和onblur
onfocus表示获取焦点时触发的事件，而onblur表示失去焦点时触发的事件，两者是相反操作。
onfocus和onblur这两个事件往往都是配合一起使用的。例如用户准备在文本框中输入内容时，此时它会获得光标，就会触发onfocus事件。当文本框失去光标时，就会触发onblur事件。
并不是所有的HTML元素都有焦点事件，具有“获取焦点”和“失去焦点”特点的元素只有2种。
- （1）表单元素（单选框、复选框、单行文本框、多行文本框、下拉列表）
- （2）超链接
判断一个元素是否具有焦点很简单，我们打开一个页面后按Tab键，能够选中的就是具有焦点特性的元素。在实际开发中，焦点事件（onfocus和onblur）一般用于单行文本框和多行文本框这两个，其他地方比较少用。
如搜索框：
1 <!DOCTYPE html>
2 <html>
3 <head>
4 <meta charset="utf-8" />
5 <title></title>
6 <style type="text/css">
7 #search{color:#bbbbbb;}
8 </style>
9 <script>
10 window.onload = function ()
11 {
12 //获取元素对象
13 var oSearch = document.getElementById("search");
14 //获取焦点
15 oSearch.onfocus = function ()
16 {
17 if (this.value == "百度一下，你就知道")
18 {
19 this.value = "";
20 }
21 };
22 //失去焦点
23 oSearch.onblur = function ()
24 {
25 if (this.value == "")
26 {
27 this.value = "百度一下，你就知道";
28 }
29 };
30 }
31 </script>
32 </head>
33 <body>
34 <input id="search" type="text" value="百度一下，你就知道"/>
35 <input type="button" value="搜索" />
36 </body>
37 </html>
3.onselect
在JavaScript中，当我们选中“单行文本框”或“多行文本框”中的内容时，就会触发onselect事件。
如
1 <!DOCTYPE html>
2 <html>
3 <head>
4 <meta charset="utf-8" />
5 <title></title>
6 <script>
7 window.onload = function ()
8 {
9 var oTxt1 = document.getElementById("txt1");
10 var oTxt2 = document.getElementById("txt2");
11 oTxt1.onselect = function ()
12 {
13 alert("你选中了单行文本框中的内容");
14 };
15 oTxt2.onselect = function ()
16 {
17 alert("你选中了多行文本框中的内容");
18 };
19 }
20 </script>
21 </head>
22 <body>
23 <input id="txt1" type="text" value="如果我真的存在，也是因为你需要我。"/><br />
24 <textarea id="txt2" cols="20" rows="5">如果我真的存在，也是因为你需要我。</textarea>
25 </body>
26 </html>
三、onchange
在JavaScript中，onchange事件常用于“具有多个选项的表单元素”。
- （1）单选框选择某一项时触发。
- （2）复选框选择某一项时触发。
- （3）下拉列表选择某一项时触发。
当我们选择下拉列表的某一项时，就会触发onchange事件，然后就会在新的窗口打开对应的页面。下拉菜单这种效果还是比较常见的，我们可以了解一下。
对于select元素来说，我们可以使用obj.options[n]的方式来得到某一个列表项，这个列表项也是一个DOM对象。并且还可以使用obj.selectedIndex来获取你所选择的这个列表项的下标。这两个都是下拉列表所独有的也是经常用的方法。
此外，window.open()表示打开一个新的窗口，对于这个我们在“13.2 窗口操作”这一节会详细介绍。
有一点要提醒大家的：选择下拉列表的某一项时，触发的是onchange事件，而不是onselect事件。onselect事件仅仅在选择文本框中的内容时才会触发，我们要清楚这两者的区别。
标签：WEB,onblur,触发,--,16,文本框,onselect,事件,onfocus 来源： https://www.cnblogs.com/AKpz/p/15646933.html