表单事件

一、表单事件

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事件仅仅在选择文本框中的内容时才会触发，我们要清楚这两者的区别。

posted @   Heroes13  阅读(417)  评论(0)  编辑  收藏  举报
编辑推荐：
· .NET Core 中如何实现缓存的预热？
· 从 HTTP 原因短语缺失研究 HTTP/2 和 HTTP/3 的设计差异
· AI与.NET技术实操系列：向量存储与相似性搜索在 .NET 中的实现
· 基于Microsoft.Extensions.AI核心库实现RAG应用
· Linux系列：如何用heaptrack跟踪.NET程序的非托管内存泄露
阅读排行：
· TypeScript + Deepseek 打造卜卦网站：技术与玄学的结合
· 阿里巴巴 QwQ-32B真的超越了 DeepSeek R-1吗？
· 【译】Visual Studio 中新的强大生产力特性
· 10年+ .NET Coder 心语 ── 封装的思维：从隐藏、稳定开始理解其本质意义
· 【设计模式】告别冗长if-else语句：使用策略模式优化代码结构
点击右上角即可分享
微信分享提示
AI IDE Trae