一、事件与事件处理概述
1、事件的调用
（1）、在html中调用；
在html中添加相应的事件，并在指定要执行的代码或函数名即可；
<input type="button" name="save" id="" value="保存" onclick="alert('您单击了保存按钮');"/>
可以通过调用函数来实现，代码如下：
<input type="button" name="save" id="" value="保存" onclick="clickFunction();"/>
<script>
function clickFunction(){
document.write("你那么笨！怎么还不好好学习！")
}
</script>（2）、在js中调用
在js中调用事件处理程序，首先需要获得处理对象的引用，然后将要执行的处理函数赋值给对应的事件，例如：当单击“保存”按钮时将弹出提示对话框，代码如下：
<input id="save" name="save" type="button" value="保存" />
<script>
var b_save = document.getElementById("save");
b_save.onclick = function(){
alert("单击了保存按钮1");
}
</script>
也可以通过以下代码来实现：
<form id="form1" name="form1" method="post" action="">
<input id="save" name="save" type="button" value="保存" />
</form>
<script>
form1.save.onclick = function(){
alert('单击按钮不好玩？');
}
</script>
2、事件对象
在IE浏览器中事件对象是window对象的一个属性event，并且event对象只能在事件发生时候被访问，所有事件处理完，该对象就消失了，而标准的DOM中规定event必须作为唯一的参数传给事件处理函数，为了实现兼容性，通常采用以下方法；
function someHadle(event){
if(window.event)
event = window.event;
}在IE中，事件的对象包含在event的srcElement属性中，而在标准的DOM浏览器中，对象包含在target属性中，为了处理两种浏览器兼容性，举例如下：
function handle(oEvent){
if(window.event)oEvent = window.event; //处理兼容性;获得事件对象;
var oTarget;
if(oEvent.srcElement)
oTarget = oEvent.srcElement; //处理兼容性;获得事件目标;
else
oTarget = oEvent.target; //弹出目标的标记名称
alert(oTarget.tagName);
}
window.onload = function(){
var oImg = document.getElementsByTagName("img")[0];
oImg.onclick = handle;
}二、表单相关事件
1、获得焦点与失去焦点事件
<table align="center" width="337" height="204" border="0">
<tr>
<td width="108">用户名：</td>
<td width="213"><form name="form1" method="post" action="">
<input type="text" name="textfield" onfocus="txtfocus()" onblur="txtblur()"/>
</form></td>
</tr>
<tr>
<td>密码：</td>
<td><form name="form2" method="post" action="">
<input type="text" name="textfield2" onfocus="txtfocus()" onblur="txtblur()" />
</form></td>
</tr>
<tr>
<td>真实姓名：</td>
<td><form name="form3" method="post" action="">
<input type="text" name="textfield3" onfocus="txtfocus()" onblur="txtblur()" />
</form></td>
</tr>
<tr>
<td>性别：</td>
<td><form name="form4" method="post" action="">
<input type="text" name="textfield4" onfocus="txtfocus()" onblur="txtblur()" />
</form></td>
</tr>
<tr>
<td>邮箱：</td>
<td><form name="form5 method="post" action="">
<input type="text" name="textfield5" onfocus="txtfocus()" onblur="txtblur()" />
</form></td>
</tr>
</table>
<script>
function txtfocus(event){
var e = window.event;
var obj = e.srcElement;
obj.style.background = "#FF9966";
}
function txtblur(event){
var e = window.event;
var obj = e.srcElement;
obj.style.background = "#FFFFFF";
}
</script>1、失去焦点内容改变事件
失去焦点内容改变事件（onchange）是当前元素失去焦点并且元素的内容发生改变时触发事件处理程序，该事件一般下下拉文本框中使用。
<form name="form1" method="post" action="">
<input name="textfield" type="text" size="23" value="自学教学视频" />
<select name="menu1" onchange="Fcolor()">
<option value="black">黑</option>
<option value="yellow">黄<option>
<option value="green">绿</option>
<option value="blue">蓝</option>
<option value="red">红</option>
<option value="purple">紫</option>
</select>
</form>
<script>
function Fcolor(){
var e = window.event;
var obj = e.srcElement;
form1.textfield.style.color = obj.options[obj.selectedIndex].value;
}
</script>3、表单提交与重置事件
表单提交事件（onsubmit）是在用户提交表单时（通常使用“提交”按钮，也就是将type设置为submit）在表单提交之前被触发，因此，该事件的处理程序通过返回false值来阻止表单的提交。该事件可以用来验证表单输入项的正确性。
表单重置事件（onreset）与表单提交事件的处理过程相同，该事件只是将表单中的各元素的值设置为原始值；一般用于清空表单的文本框。
这两个事件的语法格式如下
<form name="formname" onreset="return Funname" onsubmit="return Funname"></form>formname：表单名称；
Funname：函数名或者执行语句，如果是函数名，在该函数中必须有布尔型的返回值；
如果在onsubmit和onreset事件中调用的是自定义函数名；那么。必须在函数名的前面加return语句，否则；不论返回的是true还是false，当前函数返回的一律是true值；
三、鼠标键盘事件
1、鼠标单击事件
一般用于Button对象、Checkbox对象、Image对象、Link对象、Radio对象、Reset对象和Submit对象
<script>
var Array = new Array("yellow","teal","red","maroon","lime");
var n = 0;
function turncolors(){
if(n==(Arraycolor.length-1)) n=0; //判断数组指针是否指向最后一个元素。
n++; //变量自加1；
document.bgColor = Arraycolor[n]; //设置背景颜色为对应数组元素的值；
}
</script>
<form name="form1" method="post" action=""></form>
<p>
<input type="button" name="Submit" value="变换背景" onclick="turncolors()" />
</p>
<p>用按钮随意变换背景</p>
</form>·2、鼠标按下和单击事件
鼠标按下和松开事件指的是onmousedown和onmouseup事件。
<p id="p1" style="color: #008000;" onmousedown="mousedown()" onmouseup="mouseup()" ><u>JS自学视频</u></p>
<script>
function mousedown(){
var obj = document.getElementById("p1");
obj.style.color = '#9ACD32';
}
function mouseup(){
var obj = document.getElementById("p1");
obj.style.color = '#A9A9A9';
window.open("","博的加油！");
}
</script>3、鼠标移入和移除事件
onmouseover：移入
onmouseout：移
<table border="0" cellpadding="0" cellspacing="0">
<tr>
<td align="center" bgcolor="#FF0000">
<img src="img/jiantou.png" border="0" style="filter: alpha(opacity=100)" onmouseover="visible(this,1)"
onmouseout="visible(this,0)"
width="148" height="121">
</td>
</tr>
</table>
<script>
function visible(cursor,i){
if(i==0)
cursor.filters.alpha.opacity = 100;
else
cursor.filters.alpha.opacity = 50;
}
</script>4、鼠标移动事件
onmousemove
var x=0;y=0;
function MousePlace(){
x = window.event.x;
y = window.event.y;
window.status = "鼠标在当前位置的横坐标X："+x+" "+"纵坐标Y:"+y;
}
document.onmousemove = MousePlace;5、键盘事件
包括onkeypress onkeydown onkeyup
案例：利用A键对页面进行刷新
function Refurbish(){
if(window.event.keyCode == 97){
location.reload();
}
} 四、页面事件
1、加载与卸载事件
<body onunload="pclose()"> <!-- 调用窗体卸载事件； -->
<img src="img/jiantou.png" name="img1" onload="blowup()" onmouseout="blowup()" onmouseover="reduce()">
<script>
var h = img1.height;
var w = img1.width;
function blowup(){ //缩小图片
ig(img1.height>=h){
img1.height = h-100;
img1.width = w-100;
}
}
function reduce(){ //恢复原始图片大小
ig(img1.height<h){
img1.height = h;
img1.width = w;
}
}
function pclose(){ //卸载网页时弹出提示框
alert("您不要再看看我吗啊")
}
</script>2、页面大小事件
用户改变浏览器大小时触发的事件处理程序；主要用于固定浏览器的大小；
function fastness(){
window.resizeTo(650,500); //设置浏览器窗口大小
}
document.body.onresize = fastness; //固定浏览器的大小
document.body.onload = fastness;
