JavaScript教程之事件驱动及事件处理

当前位置:

首页 > 网站开发 > JavaScript >

JavaScript教程之事件驱动及事件处理

事件驱动及事件处理

１、基本概念

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

２、事件处理程序

　　在JavaScript中对象事件的处理通常由函数(Function)担任。其基本格式与函数全部一样，可以将前面所介绍的所有函数作为事件处理程序。

格式如下：

Function 事件处理名（参数表）{

事件处理语句集；

……

}

３、事件驱动

　　JavaScript事件驱动中的事件是通过鼠标或热键的动作引发的。它主要有以下几个事件：

（１）单击事件onClick

　　当用户单击鼠标按钮时，产生onClick事件。同时onClick指定的事件处理程序或代码将被调用执行。通常在下列基本对象中产生：

button（按钮对象）

checkbox（复选框）或（检查列表框）

radio （单选钮）

reset buttons（重要按钮）

submit buttons（提交按钮）

例：可通过下列按钮激活change()文件：

<Form>

</Form>

　　在onClick等号后，可以使用自己编写的函数作为事件处理程序，也可以使用JavaScript中内部的函数。还可以直接使用JavaScript的代码等。例：

<Input type="button" value=" " onclick=alert("这是一个例子"）;

（２）onChange改变事件

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

例：

<Form>

</Form>

（３）选中事件onSelect

　　当Text或Textarea对象中的文字被加亮后，引发该事件。

（４）获得焦点事件onFocus

　　当用户单击Text或textarea以及select对象时，产生该事件。此时该对象成为前台对象。

（５）失去焦点onBlur

　　当text对象或textarea对象以及select对象不再拥有焦点、而退到后台时，引发该文件，他与onFocas事件是一个对应的关系。

（６）载入文件onLoad

　　当文档载入时，产生该事件。onLoad一个作用就是在首次载入一个文档时检测cookie的值，并用一个变量为其赋值，使它可以被源代码使用。

（７）卸载文件onUnload

　　当Web页面退出时引发onUnload事件，并可更新Cookie的状态。

四、范例

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

test3_1.htm

<HTML>

<HEAD>

<!--

function loadform(){

alert("这是一个自动装载例子!");

}

function unloadform(){

alert("这是一个卸载例子!");

}

//-->

</Script>

</HEAD>

</BODY>

</HTML>

范例2：这是一个获取浏览器版本号的程序。该程序首先显示一个波浪一提示信息。之后显示浏览器的版本号有关信息。

test3_2.htm

<html>

<head>

// -->

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所示。　

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

栏目列表