JavaScript事件处理

---

一、事件与事件处理概述

最近学JavaScript，学到了这里发现事件处理其实和asp.net中的控件意思差不多。

目录即为JavaScript事件处理的知识框架。

事件处理的过程分为三步：

• 发生事件
• 启动事件处理程序
• 事件处理程序做出反应

什么是事件？ 事件是指一些可以通过脚本响应的页面动作。当用户按下鼠标或者提交一个表单等等时候，事件都会出现。事件处理是一段JavaScript代码，总是与页面中的特定部分以及一定的事件相关联。当与页面特定部分相关联的事件发生时，事件处理器就会被调用。

（一）JavaScript常用事件

下表总结了一些JavaScript常用事件

（二）事件的调用

1、在HTML中调用

在HTML中分配事件处理程序，只需要在HTML标记中添加相应的事件，并在其中指定要执行的代码或时函数名即可。例如：

<input name="save" type="button" value="保存" onclick="alert('单击了保存按钮');">

2、在JavaScript中调用

在JavaScript中调用事件处理程序，首先需要获取要处理对象的引用，然后将要执行的处理函数赋值给对应的事件。例如，单击保存按钮弹出对话框：

<input id="save" name="save" type="button" value="保存">
<script type="text/javascript">
    var b_save=document.getElementById("save"); //获取id属性值为save的元素
    b_save.onclick=function () {
        alert("单击了保存按钮！");
    }
</script>

或者：

<form id="form1" name="form1" method="post" action="">
    <input id="save" name="save" type="button" value="保存">
</form>
<script type="text/javascript">
    form1.save.onclick=function () {
        alert("单击了保存事件！");
    }
</script>

效果如下：

（三）事件对象

在IE浏览器中事件对象是Window对象的一个属性event，并且event对象只能在事件发生时被访问，当所有事件处理完后，该对象就自动消失了。为了处理兼容性，通常这样写：

    function someHandle(event) {
        //处理兼容性，获取事件对象
        if(window.event)
            event=window.event;
    }

在IE浏览器中，发生事件的元素通过event对象的srcElemet属性获取，而在标准的DOM浏览器中，发生事件的元素通过event对象的target属性获取。为了处理两种浏览器兼容性，举例代码如下:

<form id="form1" name="form1" method="post" action="">
    <input id="save" name="save" value="保存" type="button">
</form>
<script type="text/javascript">
    function handle(oEvent) {
        if(window.event) oEvent=event;
        var oTarget;
        if(oEvent.srcElement)
            oTarget=oEvent.srcElement;
        else
            oTarget=oEvent.target;
        alert(oTarget.tagName);     //弹出发生事件的元素标记名称
    }
    form1.save.onclick=handle;      //为按钮绑定单击事件
</script>

---

二、表单相关事件

实际上就是对元素获得或失去焦点的动作进行控制。可以利用表单事件来改变获得或失去焦点的元素样式。

（一）获得焦点与失去焦点事件

获得焦点事件（onfocus）是当某个元素获得焦点时触发事件处理程序。失去焦点事件（onblur）是当前元素失去焦点时触发事件处理程序。在一般情况下，这两个事件同时使用。

通过一个例子，来说明他是怎么用的，效果如下图所示。用户选中文本框时，改变选中文本框的背景颜色，当选择其他文本框时将失去焦点的文本框恢复为原来的颜色。

直接上代码：

<table align="center" width="300" height="160" border="1">
    <form name="form1">
        <tr>
            <td width="80" align="right">用户名：</td>
            <td width="200">
                <input type="text" onfocus="txtfocus()" onblur="txtblur()">
            </td>
        </tr>
		<!-- 篇幅所限，此处省略其他元素，和上面一样 -->
    </form>
</table>
<script type="text/javascript">
    function txtfocus() {
        var e=window.event;     //获取事件对象
        var obj=e.srcElement;   //获取事件发生的元素
        obj.style.background="#ff9966";
    }
    function txtblur() {
        var e=window.event;
        var obj=e.srcElement;
        obj.style.background="#FFFFFF";
    }
</script>

（二）失去焦点内容改变事件

失去焦点内容改变事件（onchange）是指当前元素失去焦点，并且元素的内容发生改变时触发事件处理程序。该事件一般再下拉菜单中使用。

例子：改变文本框中的字体颜色

<form name="form1">
    <input name="textfield" type="text" size="18" value="Hello JavaScript">
    <select name="menu1" onchange="Fcolor()">
        <option value="black">黑色</option>
        <option value="red">红色</option>
        <option value="green">绿色</option>
    </select>
</form>
<script type="text/javascript">
    function Fcolor() {
        var e=window.event;
        var obj=e.srcElement;
        form1.textfield.style.color=obj.value;
    }
</script>

效果如下：

（三）表单提交与重置事件

• 表单提交事件（onsubmit）是在用户提交表单时，在表单提交之前被触发（提交表单通常使用“提交”按钮，也就是将按钮的type属性设置为submit），因此，该事件的处理程序通过返回false值来阻止表单的提交。该事件可以用来验证表单输入项的正确性
• 表单重置事件（onreset）与表单提交事件的处理过程相同，该事件只是将表单中的各元素的值设置为原始值。一般用于清空表单中的文本框。

下面给出的这两个事件的使用格式：

<form name="formname" onsubmit="return Funname" onreset="return Funname"></form>

如果onsubmit和onreset事件中调用的是自定义函数名，那么，必须在函数名的前面加return 语句，否则，不论在函数中返回的是真还是假，当前事件所返回都是true值

例子：验证提交的表单中是否有空值，通过onsubmit事件来判断提交的表单是否有空文本框，如果有空文本，则返回false，代码如下：

<form name="form1" onsubmit="return AllSubmit()">
	<!-- 省略部分HTML代码 -->
	<input name="sub" type="submit" id="sub2" value="提交">
	<input type="reset" name="Submit2" value="重置">
</form>
<script type="text/javascript">
    function AllSubmit() {
        var T = true;
        var e = window.event;
        var obj = e.srcElement;
        for(var i = 1 ; i <= 7 ; i ++ )
            if(eval("obj."+"txt"+i).value==""){
                T=false;
                break;
            }
        if(!T) alert("提交信息不允许为空");
        return T;
    }
</script>

效果如下：

---

三、鼠标和键盘事件

（一）鼠标单击事件

单击事件（onclick）是指在鼠标单击时被触发的事件。单击事件一般应用于Button对象、Checkbox对象、Link对象、Radio对象、Reset对象和Submit对象。

例子：动态改变页面的背景颜色，代码如下：

<form name="form1" method="post" action="">
    <p><input type="button" id="Submit" name="Submit" value="变换背景"></p>
    <p>用按钮随意变换背景颜色</p>
</form>
<script type="text/javascript">
    var Arraycolor=new Array("olive","teal","red","blue","maroon","navy",
        "lime","fuschia","green","purple","gray","yellow","aqua","white","silver");
    var n = 0;
    form1.Submit.onclick=function() {
        if(n==(Arraycolor.length-1)) n = 0;
        n++;
        document.bgColor=Arraycolor[n];
    }
</script>

效果如下：

（二）鼠标按下和松开事件

鼠标的按下和松开事件分别是onmousedown和onmouseup事件。其中，onmousedown事件用于在鼠标按下时触发事件处理程序，onmouseup事件则是在鼠标松开时触发事件处理程序。

例子：用事件模拟超链接标记的功能，当按下鼠标时，字体改变颜色，当松开鼠标时则回到原来的颜色，代码如下：

<p id="p1" style="color: #AA9900;cursor: pointer" onmousedown="mousedown()"
   onmouseup="mouseup()"><u>Hello little pang！</u></p>
<script type="text/javascript">
    function mousedown() {
        var obj = document.getElementById('p1');    //获取包含文本的元素
        obj.style.color="#0022AA";
    }
    function mouseup(){
        var obj=document.getElementById('p1');
        obj.style.color="#AA9900";
    }
</script>

效果如下：

（三）鼠标移入和移出事件

鼠标的移入移出事件分别是onmouseover和onmouseout事件，其中onmouseover事件时在鼠标移动到对象上方时触发事件处理程序，onmouseout事件则是在鼠标移出对象上方时触发事件处理程序。

例子：动态改变图片焦点，当鼠标移入图片，图片的透明度将为50%，否则100%显示。代码如下：

<script type="text/javascript">
function visible(cursor,i) {
    if(i==0)
        cursor.style.opacity=1;   //图片透明度设置为100
    else
        cursor.style.opacity=0.5;    //图片透明度设置为50
}
</script>
<table border="0" cellspacing="0" cellpadding="0">
    <tr>
        <td align="center">
            <img src="images/3.jpg" border="0" style="filter:alpha(opacity=100)" onMouseOver="visible(this,1)" onMouseOut="visible(this,0)" width="148" HEIGHT="148">
        </td>
    </tr>
</table>

效果如下：

（四）鼠标移动事件

鼠标移动事件（onmousemove）是指鼠标在页面上进行移动时触发事件处理程序，可以在该事件中用Document对象实时读取鼠标在页面中的位置。

例子：获取鼠标指针的座标。代码如下：

<script type="text/javascript">
    var x=0,y=0;
    function MousePlace() {
        x=window.event.x;
        y=window.event.y;
        //输出鼠标的当前位置
        document.getElementById('position').innerHTML="鼠标在页面中的当前位置的横座标X："+x+",纵座标Y："+y;
    }
    document.onmousemove=MousePlace;
</script>
<span id="position"></span>

效果如下：

（五）键盘事件

键盘事件包含onkeypress、onkeydown和onkeyup事件：

• onkeypress：指在键盘上的某个键被按下并且释放时触发此事件的处理程序，一般用于键盘上的单键操作
• onkeydown：指在键盘上某个键被按下时触发此事件的处理程序，一般用于组合键的操作
• onkeyup：指在键盘上的某个键被按下后松开时触发此事件的处理程序，一般用于组合键的操作

键盘上的字母和数据键的键码值，请访问：

http://www.bejson.com/othertools/keycodes/

一般这样用：

<script type="text/javascript">
function solve(){
	if(window.event.keyCode==某个键码值){
		处理;
	}
	document.onkeydown=solve;
}
</script>

---

四、页面事件

页面事件是指在页面加载或改变浏览器大小、位置及对页面中的滚动条进行操作时，所触发的事件处理程序。

（一）加载与卸载事件

加载事件onload是指在网页加载完毕后触发相应的事件处理程序，它可以在网页加载完成后对网页中的表格样式、字体等等进行设置。

卸载事件onunload是指在卸载网页时触发相应的事件处理程序，指刷新、关闭或从当前页跳转到其他网页中。

例子：动态改变图片大小，代码如下：

<body onunload="pclose()">
<img src="images/3.jpg" name="img1" onload="blowup()" onmouseout="blowup()" onmouseover="reduce()">
<script type="text/javascript">
    var h=img1.height;
    var w=img1.width;
    //缩小图片
    function blowup() {
        if(img1.height>=h){
            img1.height=h-100;
            img1.width=w-100;
        }
    }
    function reduce() {
        if(img1.height<h){
            img1.height=h;
            img1.width=w;
        }
    }
    function pclose() {
        alert("欢迎浏览本网页");
    }
</script>
</body>

效果如下：

（二）页面大小事件

页面大小事件onresize是指用户改变浏览器的大小时触发事件处理程序。例如当浏览器窗口被调整大小时，将太初一个对话框，代码如下：

<body onresize="showMsg()">
<script type="text/javascript">
function showMsg(){
	alert("浏览器窗口大小被改变！");
}
</script>
</body>

---