【web】javascript基础巩固（五）——事件&表单

事件流

1 事件冒泡：即事件开始时由具体的元素接受，然后逐级向上传播到较为不具体的节点，主流浏览器将一直冒泡到window对象上。
2 事件捕获：不太具体的节点更早接收到事件，而最具体的节点最后接收到事件，用意在事件达到预定目标之前捕获它。
3 DOM事件流：包括三个阶段，事件捕获阶段，处于目标阶段和事件冒泡阶段。

事件处理程序

1 DOM0级事件处理程序：

• 每个元素都有自己的事件处理程序属性，这些属性通常全部小写。
• 使用DOM0级方法指定的事件处理程序被认为是元素的方法，因此这时候的事件处理程序是在元素的作用域中运行的，换句话说，程序中的this引用当前元素。
• 实际上，可以在事件的处理程序中通过this访问元素的任何属性和方法。
• 以这种方式添加的事件处理程序会在事件流的冒泡阶段被处理。
• 删除事件的方法：btn.onclick=null;
  2 DOM2级事件处理程序
• 定义了两个方法，用于处理指定和删除事件处理程序的操作：addEventListener(), removeEventListener(),所有dom节点都包括这两个方法，并且都接受三个参数，要处理的事件名，作为事件处理程序的函数和一个布尔值。若布尔值的参数为true，表示在捕获阶段。如果是false，表示冒泡阶段调用事件处理程序。
• 通过addEventListener添加的事件处理处理程序只能通过removeEventLIstener移除，移除的参数与添加程序相同，这也以为这通过addEventListener添加的匿名函数将无法移除。
• 这种添加事件处理程序的好处是可以添加多个事件处理程序。

3 IE事件处理程序
attachEvent
4 跨浏览器的事件处理程序

var EventUtil={    addHandler:function(element,type,handler){        if(element.addEventListener){            element.addEventListener(type,handler,false);        }else if(element.attachEvent){            element.attachEvent("on"+type,handler)        }else{            element['on'+type]=handler;        }    },    removeHandler:function(element,type,handler){        if(element.removeEventListener){            element.removeEventListener(type,handler,false);        }else if(element.detachEvent){            element.detachEvent("on"+type,handler)        }else{            element['on'+type]=null;        }    }}

事件对象

在触发dom上事件时，会产生一个事件对象event，这个对象中包含这所有与事件有关的信息。
1 DOM中的事件对象
event的属性的方法如下：

• bubbles:表明事件是否冒泡
• cancelable:表明是否可以取消事件的默认行为
• currentTarget:其事件处理程序当前正在处理事件的哪个元素
• defaultPrevented:为true表示已经调用了preventDefault()
• detail
• eventPhase
• preventDefault():取消事件的默认行为
• stopImmediatePropagation():取消事件的进一步捕获或者冒泡
• stopPropagation():取消事件的进一步捕获或冒泡
• target：事件的目标
• trusted
• type

• view

  在事件处理程序内部，对象this始终等于currentTarget,而target的值只包含事件的实际目标。如果直接将事件处理程序指定给了目标元素，则this,currentTarget和target包含相同的值。如果事件处理程序存在于按钮的父节点，那么这些值是不相同的。（target值不同）

在需要通过一个函数处理多个事件时，可以使用type属性
event.type

事件对象的eventPhase属性，可以用来确定事件当前正位于事件流的哪个阶段。如果是在捕获阶段调用，则为1；如果在事件处理程序处于目标对象上，则等于2，如果是冒泡阶段，则返回3

事件处理程序完成，event对象会自动销毁

事件类型

如果在页面加载前操作document.body会导致错误
1 unload事件：
这个事件是在文档被完全卸载后触发，只要用户从一个界面切换到另一个界面，就会发生unload事件，而利用这一事件最多的就是清除引用，以免内存泄露。要小心的是，既然unload事件在一切都被卸载后触发，那么在页面加载后存在的那些对象，就不一定存在了。
2.焦点事件：会在页面元素获得或者失去焦点时触发，利用document.hasFocus()方法及document.activeElement属性配合。有以下六个焦点事件

• blur:失去焦点时触发，这个事件不会冒泡
• focus:元素获得焦点时触发，这个事件不会冒泡

3 鼠标点击事件
click
客户区坐标位置：鼠标事件都是在浏览器视口中的特定位置上发生的，位置信息保存在clientX和clientY中。当用户点击这个元素时，就会看到事件的客户端坐标信息。

页面坐标位置：视口位置：pageX和pageY,这两个的值在页面不滚动时，与clientX和clientY相等。在ie8之前，使用event. clientX
+ document. documentElement. scrollLeft和event. clientY+document.documentElement. scrollTop

屏幕坐标位置：相对于整个电脑屏幕的位置，通过screenX和screenY属性可以确定鼠标事件发生时鼠标指针相对于整个屏幕的坐标信息。

表单

1 提交表单：
使用input或者button都可以定义提交按钮，只需将type设置成submit。以这种方式提交表单，浏览器会在请求发送给服务器之前触发submit，这样我们就有机会验证表单数据，并决定是否允许表单提交。阻止这个事件的默认行为就可以取消表单的提交。
在js中，以编程的方式，调用submit()方式提交表单，不会触发submit事件，因此要记得调用此方法前要先验证表单数据。
提交表单可能出现的最大的问题，就是重复提交表单，解决这一问题的办法有两个，在第一次提交表单后就禁用提交按钮，或者利用onsubmit事件处理程序取消后续的表单提交操作。
以下代码通过第一次单击后禁用提交按钮，来防止重复提交表单：

EventUtils.addHandler(form,"submit",function(event){    event=EventUtil.getTarget(event);    var target=EventUtil.getTarget(event);    var btn=target.elements["submit-btn"];    btn.disabled=true;})

2 重置表单：
使用type为reset的input或者button
在js中，以编程方式，调用reset(),会立即触发reset事件。

3 表单字段

elements属性：是表单中所有元素的集合，它们在集合中的顺序，与它们在标记中的顺序相同，可以按照位置和name特性来访问它们。
共有的表单字段属性：

• disabled:表示当前字段是否被禁用
• form：指向当前字段所属表单的指针。
• name:当前字段的名称
• readOnly
• tabIndex
• type
• value:当前字段将被提交给服务器的值，对文件字段来说，这个属性是只读的，包含着文件在计算机中的路径。

除了form属性外，可以通过js动态修改其他任何属性

type的属性值如下：

• select-one:单选列表
• select-multiple:多选列表
• submit：自定义提交按钮
• button
• reset

共有的表单字段方法：
每个表单字段有两个方法：focus()和blur().其中focus方法用于将浏览器的焦点设置到表单字段，即激活表单字段，使其可以响应键盘事件。如果调用focus的字段是不可见的，就会发生错误。
html5为表单设置了autofocus属性，js会自动把焦点移到响应字段上。
blur():作用是从元素中移走。

共有的表单字段事件：

• blur
• change:对于input和textarea元素，在它们失去焦点且value值改变时触发。对于select元素，在其选项改变时触发。
• focus
  通常，focus和blur事件以某种方式改变用户界面，要么是向用户给出视觉提示，要么是向界面中添加额外的功能。而change事件经常用于验证用户在字段中输入的数据。

文本框脚本：
有两种方式表现文本框：一种使用input元素的单行文本框，另一种是使用textarea的多行文本框，这两个空间的区别是：textarea可以使用rows和cols特性。input: type:text; size; value; maxlength

无论这两种文本框在标记中有什么区别，他们都会将用户输入的内容保存在value属性中，可以通过这个属性读取和设置文本框的值.

在处理文本框的值时，最好不使用dom方法。

4 选择文本：

• 选择事件：select():上述两种文本框用于选择文本框中的所有文本。在调用select()方法时，会将焦点设置到文本框。
• 取得选择的脚本属性：selectionStart和selectionEnd,这两个属性中保存的是基于0的值，表示所选择的文本的范围。
• 选择部分文本：setSelectionRange()方法，接受两个参数，要选择的第一个字符的索引和要选择的最后一个字符之后的字符的索引。

5 过滤输入
屏蔽字符
操作剪贴板
自动切换焦点

6html5约束验证api

• 必填字段：require
• 其他输入字段：为input的type属性又增加了几个值，type=”email”和type=”url”。要注意的是，如果不给input元素设置require属性，那么空文本框也会验证通过。另一方面，设置特定的输入类型不能阻止用户输入无效的值，只是应用某些默认的验证。
• 输入模式：pattern：正则表达式 eg:

<input type="text" pattern="\d+" name="count">

注意，模式的开头和末尾无需加上^ 和$,pattern也不能阻止用户输入无效的文本。

• 检测有效性：checkValidity()方法可以检测表单中的字段是否有效，所有表单字段都有这个方法，如果有效，则返回true，否则返回false，字段的值是否有效的判断依据是本节前面介绍过的那些约束。

document.forms[0].elements[0].checkValidity()

• validity则会告诉你什么字段有效或无效。属性包括：
  customError:
  patternMismatch:与指定的pattern不匹配，返回true
  valid：如果这里的其他属性都为false，则该值为true。
  valueMissing:如果标注为required的字段没有值，则为true
  typeMismatch:如果不是mail或者url要求的格式，则返回true
• 禁用验证
  通过设置novalidate属性，可以告诉表单不进行验证。

<form method="post" action="" novalidate></form>

如果一个表单有多个提交按钮，为了指定点击某个提交按钮而不必验证表单，可以在相应按钮上添加formnovalidate属性。

7 选择框脚本

选择框是通过select和option元素创建的，为了方便与这个控件交互，除了所有表单字段共有的属性和方法外，htmlselectelement类型还提供了如下的属性和方法。

• add(new,rel):向控件中插入新option元素，其位置在rel之前
• remove(index):移除给定位置的选项。
• multiple
• options
• selectIndex:基于0的选中项的索引。
• size:选择框中可见的行数

在dom中，每个option元素都有下列属性：

• label
• selected
• text
• value
• index
  注意：选择框的change事件与其他表单字段的change事件触发的条件不一样，其他表单字段的change事件是在值被修改且焦点离开当前字段时触发，而选择框的change事件只要选中的选项就会触发。

8 选择选项
对于只允许选择一项的选择框，就是使用selectedIndex属性，如下面的例子

var selectOption=selectbox.options[selectbox.selectedIndex]selectOption.textselectOption.value

另一种选择选项的方式，就是取得对某一项的引用，然后将其selected属性设置为true。

selectbox.options[0].selected = true;

在允许多选的选择框中设置选项的selected属性，不会取消对其他选中项的选择。需要注意的是，将selected属性设置为false对单选框没有影响。

实际上，selected属性的作用主要是确定用户选择了选择框中的哪一项，要取得多选中的项，可以循环遍历选项集合，然后测试每个选项的selected属性。

9 添加选项
使用option构造函数来创建新选项，这个构造函数是dom出现之前就有的，option构造函数接受两个参数，文本和值。第二个参数可选。
add方法，接受两个参数，要添加的项和位于新选项之后的项，如果想再列表的最后添加项，则将第二个参数设置为null。

var newoption=new Option('text','value')selectbox.add(newoption,undefined)//为了兼容浏览器，必须传入第二个参数，对第二个参数传入undefined,就可以在所有浏览器中都将新选项插入到列表最后。

10 移除选项
selectbox.remove(0);
selectbox.options[0]=null
要清除选择框中的所有项，需要迭代所有项并逐个移除它们

function clearSelectbox(selectbox){    for(var i=0,len=selectbox.options.length;i<len;i++){        selectbox.remove(i);//？    }}

11 移动和重排选项
移动选项和移除选项都有一个共同之处，即会重置每一个选项的index属性。
移动选项：(append)

var selectbox1=document.getElementById("selections1")var selectbox2=document.getElementById("selections2")selectbox2.appendChild(selectbox1.options[0])

重排选项次序的过程也十分类似(insertbefore)

var optionToMove=selectbox.options[1];selectbox.insertbefore(optionToMove,selectbox.options[optionToMove.index-1])//将其插入到了它前面的元素之前selectbox.insertbefore(optionToMove,selectbox.options[optionToMove.index+2])//将其向后移动了一个位置