当前位置: 首页 > 图文教程 > 网络编程 > Javascript > JavaScript事件驱动及事件处理

Javascript
jQuery代码:jQuery控制表单里的回车键
用DIV完美模拟createPopup 弹出窗口(脚本之家修正版),支持Firefox,ie,chrome
jQuery Flash/MP3/Video多媒体插件
9个JavaScript评级/投票插件
JS实现的radio图片选择按钮效果
IE中checkbox在刷新后初始化的问题
JavaScript 学习笔记(十一)
JS 对象介绍
javascript 哈希表(hashtable)的简单实现
jquery 防止表单重复提交代码
js parsefloat parseint 转换函数
javascript parseInt与Number函数的区别
JavaScript 学习笔记(十二) dom
JavaScript 学习笔记(十三)Dom创建表格
javascript 实现自由落体的方块效果
javascript 获取url参数和script标签中获取url参数函数代码
JAVASCRIPT style 中visibility和display之间的区别
javascript 拖放效果实现代码
jquery last-child 列表最后一项的样式
Jquery实战_读书笔记1—选择jQuery

Javascript 中的 JavaScript事件驱动及事件处理


出处:互联网   整理: 软晨网(RuanChen.com)   发布: 2009-09-28   浏览: 195 ::
收藏到网摘: n/a

1、基本概念
  JavaScript是基于对象(object-based)的语言。这与Java不同,Java是面向对象的语言。而基于对象的基本特征,就是采用事件驱动(event-driven)。它是在用形界面的环境下,使得一切输入变化简单化。通常鼠标或热键的动作我们称之为事件(Event),而由鼠标或热键引发的一连串程序的动作,称之为事件驱动(Event Driver)。而对事件进行处理程序或函数,我们称之为事件处理程序(Event Handler)。

2、事件处理程序
  在JavaScript中对象事件的处理通常由函数(Function)担任。其基本格式与函数全部一样,可以将前面所介绍的所有函数作为事件处理程序。
格式如下:
Function 事件处理名(参数表){
事件处理语句集;
……
}

3、事件驱动
  JavaScript事件驱动中的事件是通过鼠标或热键的动作引发的。它主要有以下几个事件:
(1)单击事件onClick
  当用户单击鼠标按钮时,产生onClick事件。同时onClick指定的事件处理程序或代码将被调用执行。通常在下列基本对象中产生:
button(按钮对象)
checkbox(复选框)或(检查列表框)
radio (单选钮)
reset buttons(重要按钮)
submit buttons(提交按钮)
例:可通过下列按钮激活change()文件:

以下是引用片段:
<Form>
<Input type="button" Value=“ ” onClick="change()">
</Form>

在onClick等号后,可以使用自己编写的函数作为事件处理程序,也可以使用JavaScript中内部的函数。还可以直接使用JavaScript的代码等。例:
<Input type="button" value=" " onclick=alert("这是一个例子");

2)onChange改变事件
  当利用text或texturea元素输入字符值改变时发该事件,同时当在select表格项中一个选项状态改变后也会引发该事件。
例:

以下是引用片段:
<Form>
<Input type="text" name="Test" value="Test" onCharge="check('this.test)">
</Form>

(3)选中事件onSelect
  当Text或Textarea对象中的文字被加亮后,引发该事件。
(4)获得焦点事件onFocus
  当用户单击Text或textarea以及select对象时,产生该事件。此时该对象成为前台对象。
(5)失去焦点onBlur
  当text对象或textarea对象以及select对象不再拥有焦点、而退到后台时,引发该文件,他与onFocas事件是一个对应的关系。
(6)载入文件onLoad
  当文档载入时,产生该事件。onLoad一个作用就是在首次载入一个文档时检测cookie的值,并用一个变量为其赋值,使它可以被源代码使用。
(7)卸载文件onUnload
  当Web页面退出时引发onUnload事件,并可更新Cookie的状态。

四、范例
  范例1:下例程序是一个自动装载和自动卸载的例子。即当装入HTML文档时调用loadform()函数,而退出该文档进入另一HTML文档时则首先调用unloadform()函数,确认后方可进入。

以下是引用片段:
<HTML>
<HEAD>
<script Language="JavaScript">
<!--
function loadform(){
alert("
这是一个自动装载例子!");
}
function unloadform(){
alert("
这是一个卸载例子!");
}
//-->
</Script>
</HEAD>
<BODY OnLoad="loadform()" OnUnload="unloadform()">
<a href="test.htm">
调用</a>
</BODY>
范例2:这是一个获取浏览器版本号的程序。该程序首先显示一个波浪一提示信息。之后显示浏览器的版本号有关信息。
test3_2.htm

以下是引用片段:
<html>
<head>
<script language="JavaScript"><!--
// -->
function makeArray(n){
this.length=n
return this
}
function hexfromdec(num) {
hex=new makeArray(1);
var hexstring="";
var shifthex=16;
var temp1=num;
for(x=1; x>=0; x--) {
hex[x]=Math.round(temp1/shifthex - .5);
hex[x-1]=temp1 - hex[x] * shifthex;
temp1=hex[x-1];
shifthex /= 16;
}
for (x=1; x>=0; x--) { hexstring+=getletter(hex[x]); }
return (hexstring);
}
 
function getletter(num) {
if (num < 10) { return num; }
else {
if (num == 10) { return "A" }
if (num == 11) { return "B" }
if (num == 12) { return "C" }
if (num == 13) { return "D" }
if (num == 14) { return "E" }
if (num == 15) { return "F" }
}
}
function rainbow(text){
var color_d1;
var allstring="";
for(i=0;i<text.length;i=i+2){
color_d1=255*Math.sin(i/(text.length/3));
color_h1=hexfromdec(color_d1);
allstring+="<FONT COLOR="+color_h1+"ff"+color_h1+">"+text.substring(i,i+2)+"</FONT>";
}
return allstring;
}
 
function sizefont(text){
var color_d1;
var allstring="";
var flag=0;
for(i=0,j=0;i<text.length;i=i+1){
if (flag==0) {
j++;
if (j>=7) {
flag=1;}}
if (flag==1) {
j=j-1;
if (j<=0) {
flag=0; }}
allstring+="<FONT SIZE="+ j + ">" + text.substring(i,i+1) + "</FONT>";
}
return allstring;
}
document.write("<font size=8><CENTER>")
document.write("<BR><BR>")
document.write( sizefont("
这是一个获取WEB浏览器的程序"))
document.write("</CENTER></font>")
document.write("
浏览器名称: "+navigator.appName+"<br>");
document.write("
版本号: "+navigator.appVersion+"<br>");
document.write("
代码名字: "+navigator.appCodeName+"<br>");
document.write("
用户代理标识: "+navigator.userAgent);
</script>
<body>
</body>
</html>

输出结果图1所示。

JavaScript事件驱动及事件处理
图一

本章介绍了JavaScript程序设计的有关内容。程序流、函数、事件是我们学习掌握JavaScript编程的重点。