一万字的内心戏就省略了，反正我又开始复习了，之前整理过的也不定时再更新一下，嗯，就酱。
首先，我们需要一个跨浏览器的事件对象，以便我们可以兼容,全文都会用到这个事件对象
var EventUtil = {
addHandler: function(element, type, handler){
//省略的代码 },
getEvent: function(event){
return event ? event : window.event;
},
getTarget: function(event){
return event.target || event.srcElement;
},
preventDefault: function(event){
if (event.preventDefault){
event.preventDefault();
} else {
event.returnValue = false;
}
},
removeHandler: function(element, type, handler){
//省略的代码
},
stopPropagation: function(event){
if (event.stopPropagation){
event.stopPropagation();
} else {
event.cancelBubble = true;
}
}
};
一、表单
1.1 表单的基础知识
acceptCharset: 服务器能够处理的字符集;等价于 HTML 中的 accept-charset 特性
action: 接受请求的 URL;等价于 HTML 中的 action 特性。
elements: 表单中所有控件的集合(HTMLCollection)。
enctype: 请求的编码类型;等价于 HTML 中的 enctype 特性。
length: 表单中控件的数量。
method: 要发送的 HTTP 请求类型，通常是"get"或"post";等价于 HTML 的 method 特性。
name: 表单的名称;等价于 HTML 的 name 特性。
reset(): 将所有表单域重置为默认值。
submit(): 提交表单。
target: 用于发送请求和接收响应的窗口名称;等价于 HTML 的 target 特性。
获取表单元素的方式
1、var form = document.getElementById("form1");// 通过id查找
2、var firstForm = document.forms[0]; //取得页面中的第一个表单
3、var myForm = document.forms["form2"]; //取得页面中名称为"form2"的表单
1.2提交表单
使用<input>或<button>都可以定义提交按钮， 只要将其 type 特性的值设置为"submit"即可
<!-- 通用提交按钮 -->
<input type="submit" value="Submit Form">
<!-- 自定义提交按钮 -->
<button type="submit">Submit Form</button>
种方式提交表单时，浏览器会在将请求发送给服务器之前触发 submit 事件。这样，我们就有 机会验证表单数据，并据以决定是否允许表单提交。阻止这个事件的默认行为就可以取消表单提交。例 如，下列代码会阻止表单提交
var form = document.getElementById("myForm");
EventUtil.addHandler(form, "submit", function(event){
event = EventUtil.getEvent(event);
//阻止默认事件
EventUtil.preventDefault(event);
});
提交表单时可能出现的最大问题，就是重复提交表单,解决这一问题 的办法有两个:在第一次提交表单后就禁用提交按钮，或者利用 onsubmit 事件处理程序取消后续的 表单提交操作。
1.3 重置表单
在用户单击重置按钮时，表单会被重置。使用 type 特性值为"reset"的<input>或<button>都
可以创建重置按钮
<!-- 通用重置按钮 -->
<input type="reset" value="Reset Form">
<!-- 自定义重置按钮 -->
<button type="reset">Reset Form</button>
用户单击重置按钮重置表单时，会触发 reset 事件。利用这个机会，我们可以在必要时取消重置 操作。例如，下面展示了阻止重置表单的代码。
var form = document.getElementById("myForm");
EventUtil.addHandler(form, "reset", function(event){
//取得事件对象
event = EventUtil.getEvent(event);
//阻止表单重置
EventUtil.preventDefault(event);
});
与提交表单一样，也可以通过 JavaScript 来重置表单，如下面的例子所示。 var form = document.getElementById("myForm");
//重置表单 form.reset();
与调用 submit()方法不同，调用 reset()方法会像单击重置按钮一样触发 reset 事件。
1.3 表单字段
每个表单都有elements 属性，该属性是表单中所有表单元素(字段)的集合。
var form = document.getElementById("form1");
//取得表单中的第一个字段
var field1 = form.elements[0];
//取得名为"textbox1"的字段
var field2 = form.elements["textbox1"];
//取得表单中包含的字段的数量
var fieldCount = form.elements.length;
共有的表单字段属性
除了<fieldset>元素之外，所有表单字段都拥有相同的一组属性。
disabled:布尔值，表示当前字段是否被禁用。
form:指向当前字段所属表单的指针;只读。
name:当前字段的名称。
readOnly:布尔值，表示当前字段是否只读。
tabIndex:表示当前字段的切换(tab)序号。
type:当前字段的类型，如"checkbox"、"radio"，等等。
value:当前字段将被提交给服务器的值。对文件字段来说，这个属性是只读的，包含着文件
在计算机中的路径。
//避免多次提交表单
EventUtil.addHandler(form, "submit", function(event){
event = EventUtil.getEvent(event);
var target = EventUtil.getTarget(event);
//取得提交按钮
var btn = target.elements["submit-btn"];
//禁用它
btn.disabled = true;
});
以上代码为表单的 submit 事件添加了一个事件处理程序。事件触发后，代码取得了提交按钮 并将其 disabled 属性设置为 true。注意，不能通过 onclick 事件处理程序来实现这个功能，原 因是不同浏览器之间存在“时差”:有的浏览器会在触发表单的 submit 事件之前触发 click 事件， 而有的浏览器则相反。对于先触发 click 事件的浏览器，意味着会在提交发生之前禁用按钮，结果 永远都不会提交表单。因此，最好是通过 submit 事件来禁用提交按钮。不过，这种方式不适合表 单中不包含提交按钮的情况;如前所述，只有在包含提交按钮的情况下，才有可能触发表单的 submit 事件。
共有的表单字段事件
除了支持鼠标、键盘、更改和 HTML 事件之外，所有表单字段都支持下列 3 个事件。
blur:当前字段失去焦点时触发。
change:对于<input>和<textarea>元素，在它们失去焦点且 value 值改变时触发;对于
<select>元素，在其选项改变时触发。
focus:当前字段获得焦点时触发。
当用户改变了当前字段的焦点，或者我们调用了 blur()或 focus()方法时，都可以触发 blur 和 focus 事件。这两个事件在所有表单字段中都是相同的。但是，change 事件在不同表单控件中触发的 次数会有所不同。对于<input>和<textarea>元素，当它们从获得焦点到失去焦点且 value 值改变时， 才会触发 change 事件。对于<select>元素，只要用户选择了不同的选项，就会触发 change 事件; 换句话说，不失去焦点也会触发 change 事件。
例如，假设有一个文本框，我们只允许用户输入数值。此时，可以利用 focus 事件修改文本框的背景颜色，以便更清楚地表明这个字段获得了焦点。可以利用 blur 事件恢复 文本框的背景颜色，利用 change 事件在用户输入了非数值字符时再次修改背景颜色。下面就给出了实 现上述功能的代码
var textbox = document.forms[0].elements[0];
EventUtil.addHandler(textbox, "focus", function(event){
event = EventUtil.getEvent(event);
var target = EventUtil.getTarget(event);
if (target.style.backgroundColor != "red"){
target.style.backgroundColor = "yellow";
}
});
EventUtil.addHandler(textbox, "blur", function(event){
event = EventUtil.getEvent(event);
var target = EventUtil.getTarget(event);
if (/[^\d]/.test(target.value)){
target.style.backgroundColor = "red";
} else {
target.style.backgroundColor = "";
}
});
EventUtil.addHandler(textbox, "change", function(event){
event = EventUtil.getEvent(event);
var target = EventUtil.getTarget(event);
if (/[^\d]/.test(target.value)){
target.style.backgroundColor = "red";
} else {
target.style.backgroundColor
}
});
文本框脚本
在 HTML 中，有两种方式来表现文本框:一种是使用<input>元素的单行文本框，另一种是使用 <textarea>的多行文本框。这两个控件非常相似，而且多数时候的行为也差不多。不过，它们之间仍 然存在一些重要的区别。
<input>元素的 type 特性设置为"text"
size：可以指 定文本框中能够显示的字符数
value：可以设置文本框的初始值
maxlength：特性则用 于指定文本框可以接受的最大字符数
<input type="text" size="25" maxlength="50" value="initial value">
多行文本textarea
rows：指定的是文本框的字符行数
cols：指定的是文本框的字符列数
<textarea rows="25" cols="5">initial value</textarea>
选择文本
- 选择(select)事件
var textbox = document.forms[0].elements["textbox1"];
EventUtil.addHandler(textbox, "select", function(event){
var alert("Text selected" + textbox.value);
});
- 取得选择的文本
function getSelectedText(textbox){
return textbox.value;
}
- 选择部分文本
textbox.value = "Hello world!"
//选择所有文本
textbox.setSelectionRange(0, textbox.value.length); //"Hello world!"
//选择前 3 个字符 textbox.setSelectionRange(0, 3); //"Hel"
//选择第4到第6个字符 textbox.setSelectionRange(4, 7); //"o w"
过滤输入
- 屏蔽字符
例如，下列代码只允许 用户输入数值。
EventUtil.addHandler(textbox, "keypress", function(event){ 12 event = EventUtil.getEvent(event);
var target = EventUtil.getTarget(event);
var charCode = EventUtil.getCharCode(event);
if (!/\d/.test(String.fromCharCode(charCode))){
EventUtil.preventDefault(event);
}
});
二、HTML5 约束验证API
为了在将表单提交到服务器之前验证数据，HTML5 新增了一些功能。有了这些功能，即便 JavaScript 被禁用或者由于种种原因未能加载，也可以确保基本的验证
1、required：必填字段
2、type：其他输入类型
<input type="email" name ="email">
<input type="url" name="homepage">
3.、数值范围
"number"、"range"、"datetime"、"datetime-local"、"date"、"month"、"week"， 14 还有"time"
浏览器对这几个类型的支持情况并不好，因此如果真想选用的话，要特别小心。
<input type="number" min="0" max="100" step="5" name="count">
4、 输入模式
pattern属性。这个属性的值是一个正则表达式，用于匹配文本框中的 值。
<input type="text" pattern="\d+" name="count">
4、 禁用验证
通过设置 novalidate 属性，可以告诉表单不进行验证。
<form method="post" action="signup.php" novalidate> <!--这里插入表单元素-->
</form>
饿了，吃饭，先酱
