JavaScript事件驱动编程

使用事件驱动技术，可以处理用户与页面的动态交互行为。
在动态网页编程中，事件是指可以被浏览器识别的发生在页面上的用户动作或状态变化。事件驱动是指程序的一种执行方式，即响应事件的发生而执行相关的程序代码片段。在事件驱动执行方式下，程序执行顺序不是完全按照程序代码从头至尾顺序执行，而是依据事件的发生顺序而执行。
事件处理程序是指对发生事件进行处理的程序代码片段，通常实现为一个函数。在程序运行期间，事件处理程序将响应相关事件而执行。

1.事件绑定：

事件绑定是指将一个函数与某个HTML元素的事件属性关联起来，使得当相应事件发生时就会触发该函数的执行。通过绑定，使被绑定的函数成为事件处理程序。建立事件绑定的方法有静态和动态两种。

1）事件属性及其分类：

可以为HTML元素指定事件属性，以便为元素的指定事件绑定事件处理程序。
页面浏览时可能发生的事件大致分为以下4类：
①页面事件：是指因页面状态发生变化而产生的事件，主要包括onload（文档载入）和onunload（文档卸载）事件，也包括onresize（窗口大小）、onabort（图像装载中断）和onerror（文档装载出错）等事件。
②鼠标事件：是指用户操作鼠标（点击或移动）而触发的事件，包括onclick（单击）、ondblclick（双击）、onmousedown（鼠标按下）、onmouseup（鼠标弹起）、onmouseover（鼠标悬停）、onmousemove（鼠标移动）和onmouseout（鼠标离开）等事件。
③键盘事件：是指用户在键盘上敲击输入时触发的事件，包括onkeypress（按键）、onkeydown（键按下）和onkeyup（键弹起）等事件。
④表单事件：是指与表单或表单控件相关的事件，包括onsubmit（提交）、onreset（表单重置）、onchange（内容改变）、onselect（选中文本）、onblur（失去焦点）和onfocus（获得焦点）等事件。
下表为HTML元素的常用事件：

事件属性	说明	适用元素
onload	当文档载入完成时触发	<body><frameset><iframe><img><object>
onunload	当文档卸载前触发	<body><frameset><iframe>
onresize	当调整窗口大小时触发	<body><frameset><iframe>
onabort	当图像装载中断时触发	<img><object>
onerror	当文档装载出错时触发	<body><img><object><style>
onclick	当单击鼠标时触发	大部分元素
ondblclic	当双击鼠标时触发	大部分元素
onmousedown	当鼠标按钮按下时触发	大部分元素
onmouseup	当鼠标按钮弹起时触发	大部分元素
onmouseover	当鼠标悬停时触发	大部分元素
onmousemove	当鼠标移动时触发	大部分元素
onmouseout	当鼠标离开时触发	大部分元素
onkeypress	点击一次字符键后触发	大部分元素
onkeydown	当键盘键被按下时触发	大部分元素
onkeyup	当键盘键弹起时触发	大部分元素
onsubmit	当表单被提交时触发	<form>
onreset	当表单被重置时触发	<form>
onchange	当元素内容改变时触发	<input><select><textarea>
onselect	当选中文本时触发	<input><textarea>
onblur	当元素失去焦点时触发	<button><input><select><textarea><label><body>
onfocus	当元素获取焦点时触发	<button><input><select><textarea><label><body>

若一个HTML元素拥有某个事件属性，则可以使用该事件属性绑定事件处理程序，使该元素在浏览时可以响应相应事件。

2）静态绑定：

静态绑定事件，是指将处理事件的JavaScript语句代码直接指定为HTML元素的事件属性值，并用引号括起来。例如，为<button>标签指定onclick事件属性：
<button name="button1" onclick="alert(‘Hello!’)">问候</button> 当用户单击这个按钮时，就会触发onclick事件，执行该属性中的JavaScript语句，显示一个对话框。
如果触发事件时要执行的语句比较多，则可以在事件属性中写入函数调用的语句，而把被调用的函数定义在其他地方。例如：
<button name="button2" onclick="hello_girl()">搭讪小妞</button>

3）动态绑定：

动态绑定事件，是指通过JavaSript语句建立事件绑定，其基本方法是在JavaSript程序中，将事件处理函数赋值给HTML元素对象的事件属性，简称为赋值型动态绑定。形式为：
对象.事件属性=函数引用;
对象的事件属性是对函数对象的引用，不能以字符串形式将JavaSript代码赋值给对象的事件属性。示例：
<head><title>示例</title> <script type="text/javascript" > function hello() {alert(‘Hello!’)}; </script> .</head><body> <p><button id="hello_button" name="button1">问候</button></p> <script type="text/javascript" > hello_button.onclick=hello; </script> </p></body></html>

4）绑定多个事件处理函数：

①attachEvent()方法：
在IE中，每个元素都有方法attachEvent()，用于将指定函数绑定到指定事件。格式为：
  object.attachEvent(event_name, function_handler) 其中，event_name是事件属性名，function_handler是函数引用。
attachEvent()也是一种动态绑定事件的方法，可以为对象同时绑定多个事件处理函数。示例：
<head><title>示例</title> <script type="text/javascript" >   function hello1() {alert(‘Hello!’)};   function hello2() {alert(‘你好!’)};   function hello3() {alert(‘您好!’)}; </script> .</head><body> <p><button id="hello_button" name="button1">问候</button></p> <script type="text/javascript" >   hello_button.onclick=hello1;   hello_button.attachEvent("onclick",hello2);   hello_button.attachEvent("onclick",hello3); </script> </p></body></html> 对于绑定的多个函数，其执行顺序是：先执行赋值型动态绑定的函数，再执行attachEvent()绑定的函数；而对于attachEvent()绑定的多个函数，其执行顺序是随机的，可能与绑定的顺序不同。
②detachEvent()方法：
对应于attachEvent()方法，每个元素对象也有detachEvent()方法，用于取消由attachEvent()建立的事件绑定。语法格式为：
object.detachEvent(event_name, function_handler) 这样，当event_name事件发生时，就不会执行function_handler引用的函数。
detachEvent()方法只能取消由attachEvent()建立的事件绑定，但不能取消由赋值型绑定建立的事件绑定。若要取消赋值型绑定建立的事件绑定，则必须将事件属性赋值为null，即：
  对象.事件属性=null;

5）Onload事件：

①绑定至<body>元素：
对于<body>元素，当其onload事件发生时，表明浏览器已将当前HTML文档装载完成，其脚本可以访问页面中的任意元素。依据onload事件的这种特性，可以将需要在页面载入完成后立即执行的脚本放在onload事件处理函数中。示例：
<head><title>示例</title> <script type="text/javascript" > function hello() {alert(‘Hello!’)}; function start() {hello_button.onclick=hello;} </script> .</head><body onload="start()"> <p><button id="hello_button" name="button1">问候</button></p> </body></html> 使用onload事件，可以避免在<body>标签对之间使用<script>块，从而易于实现HTML代码与脚本程序的分离。
②绑定至windows对象：
对于可以绑定至<body>元素的一些页面事件（如onload、onunload、onresize和onerror等），也可以绑定至windows对象，效果基本相同。
<head><title>示例</title> <script type="text/javascript" > function start() {alert(document.body.onload);} windows.onload=start; </script>. </head><body></body></html> 将onload事件绑定至windows对象可以实现HTML代码与脚本程序的分离。基本的做法是：在整个HTML文档中不使用静态绑定，而是在windows.onload事件处理函数中为其他元素动态建立事件绑定，从而避免将JavaScript脚本写入HTML标签属性中。

2.使用事件对象：

1）Event对象：

在编写事件处理函数时，有时需要使用事件（Event）对象。通过Event对象，可以访问事件的发生状态，如事件名、键盘鼠标状态、鼠标位置等信息。Event常用属性见下表：

属性	说明
type	表示事件名。例如，单击事件名是click，双击事件名是dbclick，等等。
srcElement	表示产生事件的元素对象。例如，单击按钮click，其srcElement就是对这个按钮对象的引用。
cancelBubble	表示是否取消当前事件向上冒泡、传递给上一层次的元素对象。默认为false，允许冒泡；否则true，禁止将事件传递给上一层次的元素对象。
returnValue	指定事件的返回值，默认为true。若设置为false，则取消该事件的默认处理
keyCode	指示引起键盘事件的按键的Unicode键码值
altKey	指示ALT键的状态，当ALT键按下时为true
ctrlKey	指示CTRL键的状态，当CTRL键按下时为true
shiftKey	指示SHIFT键的状态，当SHIFT键按下时为true
repeat	指示keydown事件是否正在重复，并且只适用于keydown事件
button	指示哪一个鼠标键被按下（1--左键；2--右键；4--中间键；0--无键按下）
x,y	指示鼠标指针相对于页面的X、Y坐标，即水平和垂直位置（像素）
clientX,clientY	指示鼠标指针相对于窗口浏览区的X、Y坐标
screenX,screenY	指示鼠标指针相对于电脑屏幕的X、Y坐标
offsetX,offsetY	指示鼠标指针相对于触发事件的元素的X、Y坐标
fromElement	用于mouseover和mouseout事件，指示鼠标指针从哪个元素移来
toElement	用于mouseover和mouseout事件，指示鼠标指针移向哪个元素

在IE中，通过window对象的event属性可以访问Event对象。但，只有当事件发生时Event对象才有效，因此只能在事件处理程序中访问Event对象。示例：为<p>元素指定事件脚本。
<head><title>示例</title> <script type="text/javascript" > function showEventName() { windows.status=windows.event.type; //将事件名显示在状态栏中 } </script></head> <body> <p onmousedown="showEventName()" onmouseup="showEventName()" ></p> </body></html>

2）事件流：

事件流，是指事件的冒泡传递过程。当一个事件发生时，该事件先由产生事件的元素响应；处理后该事件将沿HTML DOM树向上传递给其父元素响应，处理后再向上传递；直至根对象（即Document对象）。
由于存在事件流，因此当一个事件发生时，不仅可以由产生事件的元素响应，也可以由其他元素响应。但有些事件（如load、unload、blur、focus等事件）不会传递，只能由产生事件的元素响应处理。
在事件处理程序中，可以使用event.srcElement属性访问产生事件的元素对象，而通过将event.cancelBubble赋值为true则可以阻止事件继续向上传递。示例：
<head><title>示例</title> <script type="text/javascript" > function showClickTag() { windows.status=event.srcElement.tagName; //显示产生事件的元素标签名 } function alertClickTag() { alert(event.srcElement.tagName); event.cancelBubble=true; } </script></head> <body onclick="showClickTag()"> <h1>Event对象</h1><hr /> <h2 onclick="alertClickTag()">标准Event属性</h2> <p>DOM为事件对象定义了bubbles、currentTarget、eventPhase、target、timeStamp和type等属性。</p><hr /><h2>标准Event方法</h2> <p>DOM为事件对象定义了initEvent()、preventDefault()、stopPropagation()等属性</p> </body></html> 由于为<body>元素的onclick事件绑定了showClickTag()函数，因此当单击任何元素时，其onclick事件将冒泡传递给<body>元素，从而触发该事件处理函数的执行。

3）阻止事件的默认行为：

浏览器对很多事件都有一个默认的处理动作，例如单击超链接将显示链接页面，鼠标右击页面将显示一个快捷菜单，等等。
要取消浏览器对事件的默认动作，可以使用两种方法：
·在事件处理程序中将event.returnValue赋值为false；
·在事件处理程序中使用return语句控制事件处理函数的返回值，若返回false则阻止浏览器的默认行为。
而通过事件的取消绑定（detachEvent方法将对象的事件属性赋值为null）不能阻止事件的默认行为。示例：
<head><title>示例</title> <script type="text/javascript" > function preventLink() { if (event.srcElement.tagName.toUpperCase()=="A"; && event.shiftKey) { event.returnValue=false; } } </script></head> <body onclick="return preventLink()"> <p><a href="http://www.dwenzhao.cn">个人网站</a></p> </body></html> 当按下shift键的同时再单击超链接就不会有反应。

3.处理鼠标事件：

鼠标事件是指用户操作鼠标而触发的事件，分为鼠标点击事件和鼠标移动事件两类。在鼠标事件处理函数中，一般只使用Event对象的基本属性（如type）和鼠标状态属性（如button、坐标等）。此外，还可以访问altKey、ctrlKey和shiftKey属性，从而可以识别用户配合使用Alt、Ctrl和Shift键的鼠标操作。

1）鼠标点击：

当单击对象时，将触发onclick事件；当双击对象时，将触发ondblclick事件。不过，在onclick事件触发之前，会先发生onmousedown事件，然后发生onmouseup事件。与此类似，在ondblclick事件触发前，会以此发生onmousedown、onmouseup、onclick、onmouseup事件。
①使用Event对象的button属性：
在鼠标事件处理函数中，使用Event对象的button属性可以识别哪一个鼠标按键被按下：1为左键，2为右键，4为中键。示例：阻止右键快捷菜单。
<head><title>示例</title> <script type="text/javascript" > function preventContextMenu() { if (windows.event.button==2) alert("快捷菜单已禁用！"); { event.returnValue=false; } Document.onmousedown=preventContextMenu; } document.onmousedown=preventContextMenu; </script></head> <body><p>禁止快捷菜单</p></body></html> 如果将事件处理函数preventContextMenu()绑定到<body>元素，则右击页面空白处时不能禁用快捷菜单，因此示例中将事件处理函数preventContextMenu()绑定到document对象。
②使用oncontextmenu事件：
在浏览页面时，用户右击页面元素将触发oncontextmenu事件，浏览器对oncontextmenu事件的默认处理是显示一个快捷菜单。显然，若在oncontextmenu事件处理函数中将event.return Value赋值为false，或者oncontextmenu事件处理函数返回false，将取消显示快捷菜单。
<head><title>示例</title> <script type="text/javascript" > function preventContextMenu() { return false; } document.oncontextmenu=preventContextMenu; </script></head> <body><p>禁止快捷菜单</p></body></html>

2）鼠标移动：

当鼠标在同一个元素上连续移动，该元素将连续触发onmousemove事件。
当将鼠标从一个元素移出到另一个元素时，移出元素将触发1次onmouseout事件，而移入元素将触发一次onmouseover事件。在onmouseout和onmouseover这两个事件处理函数中都可以使用Event对象的fromElement和toElement属性，分别引用移出元素和移入元素。
<head><title>鼠标滑过改变图像</title></head> <body><p> <img alt="" src="a1.gif" onmouseover="this.src=’b1.gif’"/> </p></body></html> 当将事件处理函数绑定到一个元素对象时，该函数就成为该对象的方法，因此在事件处理函数中可以使用this关键字引用被绑定的元素对象。

3）鼠标位置：

在鼠标事件处理函数中，使用Event对象的x、y等位置属性可以获取鼠标指针的当前位置。
<head><title>鼠标滑过页面将显示坐标</title> <script type="text/javascript" > function showMousePosition() { windows.status="X="+windows.event.x+",Y="+window.event.y; } document.onmousemove=showMousePosition; </script></head> <body></body></html>

4.处理键盘事件：

键盘事件是指用户操作键盘而触发的事件，包括onkeydown、onkeyup和onkeypress。
当用户单击一次字符键，将依次触发onkeydown、onkeypress、onkeyup事件；当用户单击一次非字符键（如Ctrl键），将只触发onkeydown、onkeyup事件。当用户按下一个字符键不释放时，将持续触发onkeydown和onkeypress事件，直至松开按键；若按下一个非字符键不释放，则只持续触发onkeydown事件，直至松开。

1）识别键盘按键：

在键盘事件处理函数中，使用Event对象的keyCode属性可以识别用户按下哪个按键，该属性值等于用户按下的按键对应的Unicode键码值。对于键盘上的双字符键和字母键，则对应两个Unicode键码值，由按键状态确定返回哪个键码值。示例：
<head><title>示例</title> <script type="text/javascript" > var is_repeat=false; function showKeyPress() { if (is_repeat) return; //不显示因按下字符键不放而重复键入的字符 var ch=String.fromCharCode(window.event.kycode); //将键码转换为键字符 inputBlock.innerText+=ch;; } function processKeyDown() { is_repeat=window.event.repeat; //保存onkeydown事件是否重复的状态 }

document.onkeypress=showKeyPress; document.onkeydown=processKeyDown; </script></head><body> <div id="inputBlock">按键序列：</div> </body></html> 其中，fromCharCode()是String对象类的方法，用于将字符的Unicode码值转换为对应的字符，调用形式是String.fromCharCode(...)。

2）识别组合键：

在键盘事件处理函数中，既可以使用Event对象的keyCode属性，也可以访问Event的altKey、ctrlKey和shiftKey属性，从而可以识别与Alt、Ctrl和Shift键相关的组合键。示例：
<head><title>组合键Ctrl+A识别</title> <script type="text/javascript" > function processKeyDown() { var ch=String.fromCharCode(window.event.kycode); //将键码转换为键字符 if (ch.toUpperCase()=="A"&&window.event.ctrlKey) { window.event.returnValue=false; //禁止组合键的默认行为 } } document.onkeydown=processKeyDown; </script></head><body> <p>网页已禁用组合键Ctrl+A</p></body></html> 判定式"ch.toUpperCase()=="A"&&window.event.ctrlKey"用于识别是否按下了组合键Ctrl+A，即不能选中页面全部内容。

5.处理表单事件：

1)访问表单对象：

在HTML DOM中，<form>元素被定义为Form对象，属性、方法和事件见下表：

属性	说明
id	设置或返回表单的id属性
name	设置或返回表单的name属性，即表单名
action	设置或返回表单的action属性
method	设置或返回表单的method属性
element	表示表单中所有元素的集合，各控件在集合中的顺序依赖于HTML文件中的位置

方法	说明
submit()	将表单数据提交给web服务器，效果与"提交"按钮类似，但不触发onsubmit事件
reset()	该方法等同于"重置"按钮，也会触发onreset事件，重置为默认值

事件	说明
onsubmi	当用户单击"提交"按钮（即<inputtype="submit".../>元素）时触发
onreset	当用户单击"重置"按钮（即<inputtype="reset".../>元素）时触发

在脚本程序中，访问Form对象的常用方法有两种：
·根据<form>元素的id属性。例如：
var myForm=document.getElementById("myFormId"); ·根据<form>元素的name属性。例如：
var myForm=document.forms("myFormName"); 此外，IE浏览器也允许直接使用表单名访问表单（名字要唯一）。例如：
var myForm=document.myFormName; 或 var myForm=myFormName;

2)访问表单控件：

在HTML DOM中，可以放置到表单中的各个表单控件被定义为相应的表单控件对象，包括文本框（Text）、文本区（TextArea）、密码（Password）、按钮（Button）、重置按钮（Reset）、提交按钮（Submit）、单选按钮（Redio）、复选框（Checkbox）、列表（Select）、列表选项（Option）和隐藏（Hidden）等表单控件对象。
由于各种表单控制用于不同的目的，所有拥有的属性和方法也不相同，但也有一些相同的属性、方法和事件：

属性	说明
id	设置或获取控件的id属性
name	设置或获取控件的name属性，即控件名
value	设置或获取控件的value属性，当提交表单时该值将传递给服务器
defaultvalue	设置或获取控件的初始值
disabled	设置或获取控制是否禁用。默认false，允许交互；若为true，则不允许输入。
form	获取控件所在表单的引用

方法	说明
focus()	使控件获得焦点，从而可以获得键盘输入
blur()	使控件失去焦点

事件	说明
onfocus	当控件获得焦点时触发
onblur	当控件失去焦点时触发

在脚本程序中，访问表单控件的常用方法有两种：
·使用Form对象的element集合属性。例如：
var firstField=myForm.elements[0];
var usernameField=myForm.elements["userName"];
·直接使用控件名（将控件视为表单的属性）。例如：
var usernameField=myForm.userName;
<head><title>示例</title> <script type="text/javascript" > function showSubmitData() { var msg="", n=0; for. (var i=0;i<loginForm.elements.length;i++) { var element=loginForm.elements[i]; if (element.name!="") { n++; msg+="字段"+n+ " "+element.name+":"+element.value+"\n"; } } Alert(msg); } </script></head> <body onload="loginForm.Username.focus()"> <form method="post" action="" name="loginForm"> <p>用户：<input name="Username" type="text" size="20" /> 密码：<input name="UserPassword" type="password" size="20" /> <input name="Submit1" type="submit" value="登录" /> <input type="button" value="显示提交数据" onclick="showSubmitData" /></p> </form> </body></html> 其中，为<body>指定的onload事件处理程序使Username文本框在页面载入后获得焦点。
注意，只有设置了name属性的表单字段数据才会传送给服务器。

3)表单的提交：

表单提交是指将用户在表单中填写或选择的内容传送给服务器端的特定程序（由<form>元素的action属性指定，通常是CGI程序或ASP程序），然后由该程序进行具体的处理。
将表单数据提交给服务器的方法有2种：单击表单中的"提交"按钮，脚本程序中调用Form对象的submit()方法。这两种方法的效果基本相同，不同之处是：调用submit()方法将直接提交表单给服务器，而单击"提交"按钮会触发并执行onsubmit事件处理函数，并且可能阻止表单提交。

4)表单验证：

表单验证是指确定用户提交的表单数据是否合法，分为服务器端验证和客户端验证。服务器端验证是指服务器接收到用户提交的表单数据后进行表单验证工作，而客户端验证是指在向服务器提交表单数据之前进行表单验证工作。显然，完整的表单验证工作必须在服务器端完成，但在客户端也有必要进行一些初步的表单验证，这样可以省去大量错误数据的传送，进而减少网络的流量，以及避免服务器端的表单处理程序去做不必要的无用工作。
实施客户端表单验证的常用方法是使用onsubmit事件处理函数。
<head><title>示例</title> <script type="text/javascript" > function validateForm() { if (!checkName(myForm.myName.value)) return false; if (!checkNum(myForm.myNumber.value)) return false; return true; } function checkName(s) { var ok=(s.length>0); if (!ok) alert("姓名输入有误，请查核！"); return ok; } function checkNum(n) {//校验卡号符合格XXXX-XXXX-XXXX-XXXX var ok,i,ch; ok=(n.charAt(4)=="-"&&n.charAt(9)=="-"&&n.charAt(14)=="-"); if (!ok) {alert("姓名输入有误，请查核！"); return false;} for (i=0;i<19;i++) { ch=n.charAt(i); if (ch!="-"&&(ch>"9"||ch<"0")) { alert("<"+n+">卡号输入有误，请查核！"); return false; } } return true; } </script></head><body> <form name="myForm" onsubmit="return validateForm();" action="javascript:alert(已发送!’)" > <p>姓名：<input name="myName" type="text" size="20" /> 卡号：<input name="myNumber" type="text" size="20" value="0000-0000-0000-0000" /> <input type="submit" value="发送" /></p> </form> </body></html> 本例<form>元素的action属性指定的是URL伪协议，模拟服务器端程序。

5)处理按钮：

在表单中，除了"提交"和"重置"这两种按钮外，也可以放置普通按钮。对于普通按钮，一般要为其编写onclick事件处理函数。示例：
<head><title>示例</title> <script type="text/javascript" > function changeBgColor(new_bgcolor) { document.body.style.backgroundColor=new_bgcolor; } </script></head><body><p> <input type="button" value="红" onclick="changeBgColor(‘red’)" /> <input type="button" value="蓝" onclick="changeBgColor(‘blue’)" /> <input type="button" value="绿" onclick="changeBgColor(‘green’)" /> </p></body></html>

6)处理文本框：

文本框包括单行文本输入框（<input type="text">）和多行文本输入框（<textarea>）。除通用属性、方法和事件外，文本框还包含下表中的常用方法和事件：

方法	说明
select()	选中文本框的全部文本。在调用该方法时，必须保证文本框已获得焦点。

事件	说明
onchange	当用户更改内容，并且文本框失去焦点时触发。若通过为value属性赋值，则不会触发
onselect	当选中文本范围发生变化时触发。该事件不会向上传递给父元素。

<head><title>示例</title>
<script type="text/javascript" > function isvalidAge(s) { var i,ch,age; for (i=0;i<s.length;i++) { ch=s.charAt(i); if (ch<"0"||ch>"9") {alert("请输入数字!"); return false;} } age=parseInt(s); if (age<"10"||age>"100") {alert("请输入真实年龄!"); return false;} return true; } function checkAge(s) { var f=document.myform; if (isValidAge(f.age.value)) alert("输入的年龄是："+f.age.value); else { f.age.focus(); f.age.select(); //选中age中的已有内容 } return false; } </script></head><body> <form name="myForm" > <p>年龄：<input name="age" type="text" size="4" value="0" onchange="checkAge()"/> </p></form></body></html>

7)处理单选框和复选框：

除通用属性、方法和事件外，单选框和复选框对象还包含一个常用属性checked，表示是否选中，取值为true或false。示例：
<head><title>示例</title> <script type="text/javascript" > function getSelectedEffect(effects) { for (var i=0;i<effects.length;i++) { if (effects[i].checked) return effects[i].value; } return "[没有选择]"; } function getSelectedPrograms(programs) { var i,result=""; for (i=0;i<programs.length;i++) { if (programs[i].checked) result+="["+programs[i].value+"]"; } return result; } function showResult(programs) { var msg="你感觉本站："+getSelectedEffect(document.myform.page_effect) ; msg+="\n 你还希望本站出现以下栏目："+getSelectedPrograms(document.myform. program); alert(msg); } </script></head><body><h2>在线调查</h2> <form name="myform" > <p>你感觉本站效果如何（单选）： <input type="radio" value="非常好" name="page_effect" checked="checked"/>非常好 <input type="radio" value="好" name="page_effect" />好 <input type="radio" value="一般" name="page_effect" />一般</p> <p>你希望增加以下哪个栏目（多选）： <input type="checkbox" value="新闻" name="program" checked="checked"/>新闻 <input type="checkbox" value="娱乐" name="program" />娱乐 <input type="checkbox" value="教育" name="program" />教育</p> <p><input type="button" name="Button1" value="提交" onclick="showResult()" /> </p></form></body></html> 对于同组的单选框，必须指定相同的name属性，这样表单对象就是一个集合，可以通过循环语句遍历每个单选框的状态。对于复选框，其name属性可以相同也可以不同。

8)处理列表框：

列表框（<select>元素）由多个列表选项组合而成，除通用属性、方法和事件外，还有如下表的常用的属性和事件：

属性	说明
option	表示列表中所有选项的集合
size	设置或获取列表框中同时可见的选项个数，默认为1，显示为下拉列表
selectedIndex	设置或获取被选中的选项索引。若没有选中项则为-1；选中多项为第1个选中项索引
multiple	设置或获取列表是否允许选中多项的布尔值，默认为false，不允许选中多项

事件	说明
onchange	当用户更改选中项时触发

使用列表框对象的option集合属性，可以访问列表框中的每个列表选项（<option>元素）。列表选项对象有如下常用属性：

属性	说明
index	设置或获取选项的索引位置
value	设置或获取选项的值。若选项被选中，则其value值将赋予列表框的value属性
text	设置或获取选项的显示文本
selected	设置或获取选项是否选中，取值为true或false
defaultSelected	设置或获取选项是否选中的默认状态，取值为true或false

每个列表选项对象都有value和text属性，并且这两个属性的值可以不同。属性text表示选项的显示文本，而属性value表示可被传送给服务器的选项值。
对于单选列表框，使用列表框对象的selectedIndex属性可以确定当前选中的列表选项；而对多选列表框，则通过列表框对象的option集合属性遍历每个列表选项对象的selected属性，确定当前选中的所有列表选项。
<head><title>示例</title> <script type="text/javascript" > function getEdu_level(edu_level) { if (edu_level.selectedIndex>=0) return edu_level.options[edu_level.selectedIndex].text; else return "[没有选择]"; } function getLikes(links) { var i,result=""; for (i=0;i<links.length;i++) { if (links.options[i].selected) result+="["+links.options[i].text+"]"; } return result; } function showResult() { var msg="你的学历是："+gettEdu_level(document.myform.edu_level ; msg+="\n 你爱好："+getLikes(document.myform. likes); alert(msg); } </script></head><body><h2>在线调查</h2> <form name="myform" ><p> 学历：<select name="edu_level"> <option value="1" >小学</option> <option value="2" >中学</option> <option value="3" >大学</option> <option value="4" >大学以上</option></select> 爱好：<select name="likes" size="6" multiple="multiple"> <option value="1" >游泳</option> <option value="1" >篮球</option> <option value="1" >网球</option> <option value="1" >登山</option> <option value="1" >自行车</option></select> <input type="button" name="Button1" value="提交" onclick="showResult()" /> </p></form></body></html>

6.处理编辑事件：

当选中页面内容（如文本）时，就可以进行复制、剪切、粘贴和拖放等编辑操作。脚本程序中，可以使用这类操作的相关事件和对象，控制这类操作的实际效果。

1)访问选中区：

①Selection对象（选中区对象）：
要访问页面中的当前选中区（如高亮显示的文本块），可以使用Document对象的selection属性。该属性引用一个Selection对象，具有下面中的常用属性和方法：

属性	说明
type	获取选中区的类型，返回字符串值"none"（无）、"Text"（文本）"或"Control"（控件）

方法	说明
creatRange()	从当前文本选区中创建TextRange对象，或从控件选中区中创建controlRange集合
clear()	清除选中区的内容
empty()	取消当前选区，将选中区类型设置为None

②TextRange对象（文本范围对象）：
对于类型为"Text"的选区，可以调用Selection对象的createRange()方法创建一个TextRange对象，从而可以使用其text属性访问选中区包含的文本。

属性	说明
text	设置或获取文本范围内包含的文本
htmlText	获取表示文本范围的HTML代码

方法	说明
pasteHTML(sHTMLText)	将表示范围的HTML代码替换为参数SHTMLText指定的HTML代码
moveStart(sUnit[,iCount])	将范围的开始位置移动iCount个由sUnit指定的单位。其中sUnit可以是"word"（单词）、"sentence"（句子）或"textedit"（整个文本）；可选参数iCount用于指定移动数目，可以为正、负整数值，默认为1
moveEnd(sUnit[,iCount])	将范围的结束位置移动iCount个由sUnit指定的单位。
move(sUnit[,iCount])	现将范围收缩为空范围，再将该空范围移动iCount个由sUnit指定的单位。
movToPoint(iX,iY)	现将范围收缩为空范围，再将该空范围移至由iX、iY确定的文本位置。其中参数iX、iY分别表示该空范围相对于浏览器左上角的水平和垂直距离
expand(sUnit)	扩展范围以便完全包含1个由sUint指定的单位
select()	选中范围中的对象，使其文本高亮显示

除Seletion对象外，也可以使用<body>和文本框等元素对象的createTextRange()方法创建TextRange对象。
③使用TextRange对象：
实际上，TextRange对象内部管理一个文本流，该文本流来自创建该TextRange对象的元素对象（如<body>元素对象），对应于相关HTML代码标记的文本。
基于文本流，TextRange对象内部有一个开始指针和一个结束指针，用于识别文本流中的一个片段的起始位置，该片段称为文本范围。在初始状态下，这两个指针分别指向文本流的起止位置，即文本范围包含整个文本流。不过，通过调用TextRange对象的moveStart、moveEnd、move、moveToPoint和expand等方法可以改变这两个指针的位置，从而改变文本范围的位置和大小。在确定文本范围后，就可以使用TextRange对象的text、htmlText属性或pasteHTML方法读取或改变文本范围中的文本或其对应的HTML代码。示例：
<head><title>示例</title> <script type="text/javascript" > function catch_Word() { var word=document.body.createTextRange(); word.moveToPoint(event.clientX,event.clientY); //文本位置移至鼠标位置 word.expand("word"); //扩展文本范围word，是指包含一个完整的词 window.status=word.text; //取出文本范围word中的文本 } </script></head><body onmousemove="catchWord()"> <p>浏览页面时，移动鼠标，状态栏将显示鼠标所指的单词</p></body></html> ④将onselect事件绑定至<body>元素：
与选择操作相关的常用事件是onselect，当选中区发生变化时触发。该事件通常绑定于文本框控件，此外也可以绑定到<body>元素，以处理用户对页面中任意元素的选择操作。示例：
<head><title>示例</title> <script type="text/javascript" > function showSelectedText() { var selection=document.selection; if (selection.type.toLowerCase()!="text") return; var selected_range=selection.createRange(); window.status=selected_range.text; //取出文本范围word中的文本 } </script></head><body onselect="showSelectedText()"> <p>浏览页面时，状态栏将动态显示当前选中的文本</p></body></html>

2)处理复制、剪切和粘贴操作：

要处理复制、剪切或粘贴操作，可以使用下表的事件，这些事件可以绑定于页面的大部分元素：

事件	说明
oncopy	当用户复制选中区时在源元素上触发，默认效果是将选中数据复制到系统剪贴板中
oncut	当用户剪切选中区时在源元素上触发，默认效果是将选中数据从文档删除，并保存到系统剪贴板中
onpaste	当用户粘贴数据时在目标对象上触发，默认效果是将系统剪贴板中数据插入到目标对象的指定位置

在IE浏览器中，可以使用window对象的clipboardData属性访问ClipboardData对象，该对象提供了访问系统剪贴板的方法：

方法	说明
getData(sDataFormat)	从系统剪贴板获取指定格式的数据。sDataFormat指定数据格式，取值为" Text " （文本格式）或 "URL" （URL格式）
setData(sDataFormat,sData)	将指定格式的数据保存到系统剪贴板。sData是字符串型数据
clearData()	清除系统剪贴板中的数据

<head><title>示例</title> <script type="text/javascript" > function preventCopy() { window.event.returnValue=false; //取消复制操作的默认效果 window.clipboardData.setData("Text",event.srcElement.tagName); } </script></head><body oncopy="preventCopy()"> <form method="post" action="" name="loginForm"> <p>用户：<input name="Username" type="text" size="20" /> 密码：<input name="UserPassword" type="password" size="20" onpaste="return false;" /> <input name="Submit1" type="submit" value="登录" /> </p></form></body></html> 为<body>元素绑定的oncopy事件处理函数preventCopy()用于取消复制操作的默认效果，使用户在复制页面的选中内容后只能粘贴出其中元素的标签名。而为密码字段绑定的onpaste事件处理程序"return false"用于取消粘贴操作的默认效果，从而禁止以粘贴方式输入密码。

3)处理拖放操作：

在IE中，几乎可以拖曳所有内容，并且可以将拖曳内容放置到几乎所有元素中。不过，在默认情况下，只有文本框才能放置拖曳内容。相关事件见下表：

事件	说明
ondragstart	拖曳开始事件，当用户按下鼠标开始拖动选中对象时在源对象上触发
ondrag	拖曳事件，当用户拖曳对象时在源对象上持续触发
ondragend	拖曳结束事件，当用户释放鼠标时在源对象上触发，结束拖曳操作
ondragenter	拖曳进入事件，当用户拖曳对象到一个目标元素时在目标对象上触发
ondragover	拖曳悬停事件，当用户拖曳对象经过目标对象时在目标对象上持续触发
ondragleave	拖曳离开事件，在拖曳操作过程中，当用户将鼠标移出目标元素时在目标对象上触发
ondrop	放下事件，在拖曳操作过程中，当释放鼠标时在目标对象上触发

根据事件的触发对象，可以将上述事件分为两类：
·源事件：指在拖放操作期间由被拖曳对象触发的事件。当拖曳开始时触发ondragstart，然后触发ondrag事件，而且持续拖曳时会一直触发，释放时会触发ondragend事件。
·目标事件：指在拖曳操作期间由放置目标元素触发的事件。当对象被拖到某个放置目标时先触发ondragenter，然后当对象在放置目标范围内拖曳时（跟随源事件ondrag）持续触发ondragover事件，当对象被拖出放置目标时，就触发ondragleave事件。如果在放置目标上释放鼠标，就会在源事件ondragend之前先触发ondrop事件。
在拖放事件处理函数中，可以使用window.event对象的dataTransfer属性访问一个DataTrans fer对象，表示一个数据传输器。其常用属性和方法见下表：

属性	说明
effectAllowed	设置或获取源对象允许的拖放操作类型，常用值"copy"（复制）、"link"（链接）、"move"（移动）、"all"（所有）、"none"（无）和"uninitialized"（未设置）等字符串值
dropEffect	设置或获取目标对象指定的拖放操作类型及相关的光标显示类型，取值为"copy"（复制）、 "link" （链接）、"move" （移动）或"none"（无，显示不能放置光标）

方法	说明
getData(sDataFormat)	从数据传输器获取由参数sDataFormat指定格式（"Text"或"URL"）的数据
setData(sDataFormat,sData)	将指定格式的数据保存到数据传输器。sData是字符串型数据
clearData()	清除数据传输器中的数据

使用DataTransfer对象可以控制拖放操作的类型和数据，典型用法如下：
①在ondragstart事件中，设置effectAllowed属性指定允许的拖放操作类型（如copy、move、all等），并使用setData()方法设置要传输的数据。
②在ondragenter（或ondragover）事件中，设置dropEffect属性指定一种可以在目标对象中进行的拖放操作类型，并使鼠标显示为复制、移动或不能放置等光标。
③在ondrop事件中，使用getData()方法获取被传输的数据。
<head><title>示例</title> <script type="text/javascript" > function setDataForDrag() { //将数据传输器的内容设置为拖曳元素的标签名 event.dataTransfer.setData("Test",event.srcElement.tagName); } function setNoDropCursor() { //设置不能放置光标 event.returnValue=false; //取消拖曳进入的默认效果 event.dataTransfer.dropEffect="none"; } </script></head><body oncopy="return false;" ondragstart="setDataForDrag()"> <form method="post" action="" name="loginForm"> <p>用户：<input name="Username" type="text" size="20" /> 密码：<input name="UserPassword" type="password" size="20" ondrop="return false;" ondragenter = "setNoDropCursor()" /> <input name="Submit1" type="submit" value="登录" /> </p></form></body></html> 为<body>元素绑定的oncopy事件处理程序"return false"禁止复制页面的任何内容。为密码字段绑定的onpaste和ondrop事件处理程序"return false"禁止以粘贴和拖放方式输入密码。而为该字段绑定的ondragenter事件处理函数setNoDropCursor()通过将event. dataTransfer .dropEffect赋值为"none"，使拖曳对象进入密码字段时将鼠标显示为不能放置光标。

7.异常处理：

1)运行时错误：

对于程序中的错误，除了包括语法错误和语义错误外，也包括运行时错误。运行时错误也称为异常，是指程序代码符合语法规则，但是在某些情况下运行时可能出错。例如，语句window. Eval(sExp)，当变量sExp包含有效表达式时语句正常运行，但包括无效表达式时则会出错。
在IE8中，若网页出现脚本错误，将出现一个显示错误信息的对话框，并提示是否调试脚本，单击"是"按钮会自动启动IE脚本调试工具。
用户也可以控制IE不显示"网页错误"对话框，方法是打开IE的"Internet选项"对话框，在"高级"选项卡的"设置"列表中勾选"浏览"组中的"禁止脚本调试"选项。
在网页编程中，处理脚本异常的常用技术是使用onerror事件和try...catch语句。

2)Onerror事件：

当页面中的脚本运行异常时，通常会触发window对象的onerror事件。通过为这个事件编写事件处理函数，用户可以指定自己的异常处理方式。此外，window对象的onerror事件处理函数可以使用3个参数，依次是sMsg（错误信息）、sUrl（出错文档的URL）和sLine（出错语句在文档中的行号）。示例：
<head><title>示例</title> <script type="text/javascript" > window.onerror=function(sMag,sUrl,sLine); { alert("发生错误："+sMsg+"\n文档："+sUrl+"\n行号："+sLine); } function caculate() { alert(window.eval(Text1.value)); } </script></head><body> <p>请输入任意常数表达式：<input id="Text1" type="text" /> <input id="Button1" type="button" value="等于" onclick = "caculate()" /> </p></body></html> 当在文本框中输入一个有效表达式时，单击按钮触发执行caculate()函数将显示表达式的值。而当输入一个无效表达式时，执行语句window.eval(Text1.value)将出现异常，触发执行window.onerror事件处理函数，显示该错误的相关信息。
Onerror事件也可以绑定到<img>图像对象，当一个<img>对象由于某种原因不能成功载入时（如图像文件不存在），该元素将触发onerror事件。但<img>对象的anerror事件处理函数没有出错信息的相关参数。示例：
<head><title>示例</title> <script type="text/javascript" > window.onload=function(); { for (var i=0;i<document.images.length;i++); { var img=document.images[i]; img.onerror=function(){this.src="error.gif";} img.src=img.src; //重置src属性，若图像文件不存在，则触发onerror事件 } } </script></head><body> <p>又到周末<img alt="周末" src="weekend.gif" width="33" height="36" /> </p></form></body></html> 若图像文件不存在，则其第1次触发的onerror事件早于window.omload事件，而在window. omload事件处理函数中的语句img.src=img.src将第2次触发该<img>元素的onerror事件。

3)Try...catch语句：

在JavaSript程序中，可以使用try...catch语句捕获可能出现的异常。Try...catch语句包括3部分，分别是try语句、catch语句和可选的finally字句。语法格式为：
try { tryStatements //可能异常 }catch(exception){ //exception是可选项，表示描述错误信息的onerror对象 catchStatements }finally { //finally字句也是可选项 finallyStatements } 在运行该语句时，先执行可能出现异常的tryStatements语句，若出现异常，就立即从try子句退出，进入catch子句执行其catchStatements语句；若无异常，则正常执行完tryStatements语句，不会执行catchStatements语句。若出现finally子句，则无论是正常执行try子句之后，还是异常而执行catch子句之后，都会执行finallyStatements语句。
Catch子句用于捕获try子句可能出现的异常，该子句可以有参数exception，该参数引用一个描述错误信息的Error对象，见下表：

属性	说明
number	设置或获取表示特定错误的错误号（数字型）
name	设置或获取错误类型名
description	设置或获取关于错误的描述信息

<head><title>示例</title> <script type="text/javascript" > function caculate() { try { alert(window.eval(Text1.value)); } catch (e) { alert("错误类型："+e.name+"\n 错误信息："+e.description); } } </script></head><body> <p>请输入任意表达式：<input id="Text1" type="text" /> <input id="Button1" type="button" value="等于" onclick = "caculate()" /> </p></body></html>

4)Throw语句：

在JavaSript中，throw语句是与try...catch语句密切相关的语句。语法格式为：
throw exception; 其中，参数exception可以是任意表达式。throw语句用于产生一个异常，相当于一条出现异常的语句。例如：
throw "An error occurred"; 语句执行时将生成一个异常，其错误信息是"An error occurred"。

赵工的个人空间

（专业技术部分）（转网页计算）（转业余爱好部分）