学习第九天（2019-11-22）

第十四章表单脚本

一、表单的基础知识

在HTML中，表单是由<form>元素来表示的，在JavaScript中，表单对应的是HTMLFormElement 类型。HTMLFormElement 继承了 HTMLElement，因而与其他HTML元素具有相同的默认属性。不过，HTMLFormElement有自己独有的属性和方法。

在javaScript中可以提交表单、重置表单以及操作表单的字段。

下面是一个例子：

假设有一个文本框，我们只允许用户输入数值。此时，可以利用 focus 事件修改文本框的背景颜色，以便更清楚地表明这个字段获得了焦点。可以利用 blur 事件恢复文本框的背景颜色，利用change事件在用户输入了非数值字符时再次修改背景颜色。

实现代码：

 1 <html>
 2 <head>
 3 </head>
 4 <body>
 5      <form method="post" id="myForm">表单<br>
 6         <input type="text" size="20" maxlength="50" value="mytext">
 7      </form>
 8      <script type="text/javascript" src="myscript.js"></script>
 9 </body>
10 </html>

 1 var EventUtil = {
 2     addHandler: function(element,type,handler){
 3         if(element.addEventListener){
 4             element.addEventListener(type,handler,false);
 5         }else if(element.attachEvent){
 6             element.attachEvent("on"+type,handler);
 7         }else{
 8             element["on"+type]=handler;
 9         }
10     },
11     removeHandler: function(element,type,handler){
12         if(element.removeEventListener){
13             element.removeEventListene(type,handler,false);
14         }else if(element.detachEvent){
15             element.detachEvent("on"+type,handler);
16         }else{
17             element["on"+type] = null;
18         }
19     },
20     getEvent : function(event){
21         return event ? event : window.event;
22     },
23     getTarget:function(event){
24         return event.target||event.srcElement;
25     },
26     preventDefault:function(event){
27         if(event.preventDefault){
28             event.preventDefault();
29         }else{
30             event.returnValue=false;
31         }
32     },
33     stopPropagation:function(event){
34         if(event.stopPropagation){
35             event.stopPropagation();
36         }else{
37             event.cancelBubble=true;
38         }
39     }
40 };
41 
42 var textbox = document.forms[0].elements[0]; //取得text元素
43 
44 EventUtil.addHandler(textbox,"focus",function(event){ //当前字段获得焦点时触发
45     event = EventUtil.getEvent(event);
46     var target = EventUtil.getTarget(event);
47     if(target.style.backgroundColor!="red"){
48         target.style.backgroundColor = "yellow";
49     }
50     textbox.select();//选中文本框中的所有文本
51 });
52 EventUtil.addHandler(textbox,"blur",function(event){ //当前字段失去焦点时触发
53     event = EventUtil.getEvent(event);
54     var target = EventUtil.getTarget(event);
55     if(/[^\d]/.test(target.value)){ //为非数值时
56         target.style.backgroundColor = "red";
57     }else{
58         target.style.backgroundColor = "";
59     }
60 });
61 EventUtil.addHandler(textbox,"change",function(event){ <input>和<textarea>元素，在它们失去焦点且 value 值改变时触发；对于 <select>元素，在其选项改变时触发。 
62     event = EventUtil.getEvent(event);
63     var target = EventUtil.getTarget(event);
64     if(/[^\d]/.test(target.value)){
65         target.style.backgroundColor = "red";
66     }else{
67         target.style.backgroundColor = "";
68     }
69 });

来源：https://www.cnblogs.com/xiaoxb17/p/11914760.html

标签

target

handler

event

element