javascript 事件（基础）0831
事件处理包括：鼠标键盘事件，页面事件，表单，滚动字幕事件，编辑事件等
一.事件处理程序的调用
1.通过HTML标记使用事件。直接在HTML标记中指定事件处理程序，例如在<body>和<input>标记中指定。
例如： 在页面加载完成后将弹出一个“欢迎进入本网页”的对话框，在用户退出页面后，弹出一个“谢谢浏览”对话框。代码如下：
<body onLoad="alert('欢迎进入本网页')" onunLoad="alert('谢谢浏览')" >
2.指定特定对象的特定事件。
该方法是在JavaScript的<script>标记中指定特定的对象，以及该对象要执行的事件名称，并在<script>和</script>标记中编写事件处理程序代码。
<script language="JavaScript" for="对象" event="事件">
//事件处理程序代码
</script>
例如，用<script>和</script>标记来完成页面加载和关闭时显示对话框。代码如下：
<script language="javascript" for="window" event="onload">
alert("欢迎进入本页面");
</script>
<script language="javascript" for="window" event="onunload">
alert("谢谢浏览");
</script>
3.通过JavaScript代码使用事件
该方法是在JavaScript脚本中直接对各对象的事件及事件所调用的函数进行声明，不用在HTML标记中指定要执行的事件。
<事件主角 - 对象>.<事件> = <事件处理程序>;
例如：
<input type="button" name="Button" value="确定">
<script language="javascript">
function pp()
{
alert("欢迎使用JavaScript教程");
}
Button.onclick=pp;
</script>
<body>
</body></html>
二.鼠标键盘事件
var Arraycolor=new Array("olive","teal","red","blue","maroon","navy","lime","fuschia","green","purple","gray","yellow","aqua","white","silver");
var n=0;
function turncolors(){
if (n==(Arraycolor.length-1)) n=0;
n++;
document.bgColor = Arraycolor[n];
}
</script>
<form name="form1" method="post" action="">
<p>
<input type="button" name="Submit" value="变换背景" onclick="turncolors()">
</p>
<p>用按钮随意变换背景颜色.</p>
</form>
function textcolor(cursor,i)
{
if (i==0)
cursor.style.color="#0000FF";
else
cursor.style.color="#E7D745";
}
</script>
<a href="#" onmouseup="text_color(this,1)" onmousedown="text_color(this,0)">编程词典网</a>
function visible(cursor,i)
{
if (i==0)
cursor.filters.alpha.opacity=100;
else
cursor.filters.alpha.opacity=30;
}
html部分：
<table border="0" cellpadding="0" cellspacing="0">
<tr>
<td align="center" bgcolor="#CCCCCC">
<img src="Temp.jpg" border="0" style="filter:alpha(opacity=100)" onMouseOver="visible(this,1)" onMouseOut="visible(this,0)" width="148" height="121">
</td>
</tr>
</table>
鼠标移动事件（onmousemove）是鼠标在页面上进行移动时触发事件处理程序，可以在该事件中用document对象实时读取鼠标在页面中的位置。例如：
状态栏中显示鼠标的在页面中的当前位置：
var x=0,y=0;
function MousePlace()
{
x=window.event.x;
y=window.event.y;
window.status="X: "+x+" "+"Y: "+y;
}
document.onmousemove=MousePlace;
键盘事件包含onkeypress、onkeydown和onkeyup事件，其中onkeypress事件是在键盘上的某个键被按下并且释放时触发此事件的处理程序，一般用于键盘上的单键操作。Onkeydown事件是在键盘上的某个键被按下时触发此事件的处理程序，一般用于组合键的操作。Onkeyup事件是在键盘上的某个键被按下后松开时触发此事件的处理程序，一般用于组合键的操作。
在JavaScript中使用组合键，可以利用event.ctrlKey，event.shiftKey，event.altKey判断是否按下了ctrl键、shift键以及alt键。
function Refurbish(){
if (window.event.keyCode==97){ //当在键盘中按〈A〉键时
location.reload(); //刷新当前页
}
}
document.onkeypress=Refurbish;
三.页面事件
1.加载与卸载事件
2.页面大小事件
页面的大小事件（onresize）是用户改变浏览器的大小时触发事件处理程序，它主要用于固定浏览器的大小。
function fastness(){
window.resizeTo(600,450);
}
document.body.onresize=fastness;
document.body.onload=fastness;
四.表单事件
1.获得焦点事件与失去焦点事件。
获得焦点事件（onfocus）是当某个元素获得焦点时触发事件处理程序。失去焦点事件（onblur）是当前元素失去焦点时触发事件处理程序。在一般情况下，这两个事件是同时使用的。
如：
<input type="text" name="textfield" onfocus="txtfocus()" onBlur="txtblur()">
2.失去焦点修改事件
失去焦点修改事件（onchange）是当前元素失去焦点并且元素的内容发生改变时触发事件处理程序。该事件一般在下拉文本框中使用。
<form name="form1" method="post" action="">
<input name="textfield" type="text" value="JavaScript教程">
<select name="menu1" onChange="Fcolor()">
<option value="black">黑</option>
<option value="yellow">黄</option>
<option value="blue">蓝</option>
<option value="green">绿</option>
<option value="red">红</option>
<option value="purple">紫</option>
</select>
</form>
javascript代码部分：
function Fcolor()
{
var e=window.event;
var obj=e.srcElement;
form1.textfield.style.color=obj.options[obj.selectedIndex].value;
}
3.表单提交与重置事件
表单提交事件（onsubmit）是在用户提交表单时（通常使用“提交”按钮，也就是将按钮的type属性设为submit）,在表单提交之前被触发，因此，该事件的处理程序通过返回false值来阻止表单的提交。该事件可以用来验证表单输入项的正确性。
表单重置事件（onreset）与表单提交事件的处理过程相同，该事件只是将表单中的各元素的值设置为原始值。一般用于清空表单中的文本框。
例如：
<form name="formname" onReset="return Funname" onsubmit="return Funname " ></form>
formname：表单名称。
Funname：函数名或执行语句，如果是函数名，在该函数中必须有布尔型的返回值。
五.字幕滚动事件
字幕滚动事件主要是在<marquee>标记中使用。
onbounce事件是在<marquee>标记中的内容滚动到上下或左右边界时触发的事件处理程序，该事件只有在<marquee>标记的behavior属性设为aloernate时才有效。
onstart事件是在<marquee>标记中的文本开始显示时触发事件处理程序。可以通过该事件在滚动内容显示时，设置其颜色、样式、滚动方向等。
六.编辑事件
编辑事件是在浏览器中的内容被修改或移动时所执行的相关事件。它主要是对浏览器中被选择的内容进行复制、剪切、粘贴时的触发事件，以及在用鼠标拽动对象时所触发的一系列事件的集合。
1.文本编辑事件
复制事件是在浏览器中复制被选中的部份或全部内容时触发事件处理程序，复制事件有onbeforecopy和oncopy两个事件，onbeforecopy事件是将网页内容复制到剪贴版时触发事件处里程序，oncopy事件是在网页中复制内容时触发事件处里程序。
<body oncopy="return pp()">
function pp()
{
alert("该页面不允许复制");
return false;
}
屏蔽网页中的复制功能，可以直接在<body>标记的onbeforecopy或oncopy事件中用JavaScript语句来实现。代码如下：
<body oncopy="return false">
2．剪切事件
剪切事件是在浏览器中剪切被选中的内容时触发事件处理程序，剪切事件有onbeforecut和oncut两个事件，onbeforecut事件是当页面中的一部分或全部内容被剪切到浏览者系统剪贴板时触发事件处理程序，oncut事件是当页面中被选择的内容被剪切时触发事件处理程序。
例 屏蔽在文本框中进行剪切的操作：
<form name="form1" method="post" action="">
<textarea name="textarea" cols="50" rows="10" oncut="return false">
<body oncopy="return pp()"></body>
function pp()
{
alert("该页面不允许复制");
return false;
}
3.对象拖拽事件
微软公司为IE浏览器提供的拖放事件有两类，一类是拖放项事件，一类是放置目标事件。
拖放对象事件包含ondrag、ondragend和ondragstart事件。
ondrag事件是当某个对象被拖动时触发事件处理程序。ondragend事件是当鼠标拖动结束时触发事件处理程序，即当鼠标的按钮被释放时触发该事件。ondragstart事件是当某对象将被拖动时触发事件处理程序，即当鼠标按下，开始移动鼠标时触发该事件。
放置目标事件包含ondragover、ondragenter、ondragleave和ondrop事件。
ondragover事件是当某个被拖动的对象在另一对象容器范围内拖动时触发事件处理程序。
ondragenter事件是当对象被鼠标拖动进入其容器范围内时触发事件处理程序。
ondragleave事件是当鼠标拖动的对象离开其容器范围内时触发事件处理程序，即当dragover停止触发，对象被拖出放置目标时，触发该事件。
ondrop事件是在一个拖动过程中，释放鼠标时触发事件处理程序，即被拖动的对象在其他容器上松开鼠标时，触发drop事件而不是dragleave事件。
