最近学JavaScript
,学到了这里发现事件处理其实和asp.net
中的控件意思差不多。
目录即为JavaScript事件处理的知识框架。
事件处理的过程分为三步:
什么是事件? 事件是指一些可以通过脚本响应的页面动作。当用户按下鼠标或者提交一个表单等等时候,事件都会出现。事件处理是一段JavaScript
代码,总是与页面中的特定部分以及一定的事件相关联。当与页面特定部分相关联的事件发生时,事件处理器就会被调用。
在HTML
中分配事件处理程序,只需要在HTML标记
中添加相应的事件,并在其中指定要执行的代码或时函数名即可。例如:
<input name="save" type="button" value="保存" onclick="alert('单击了保存按钮');">
在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>