JavaWeb自学笔记 JavaScript函数与事件

函数实质上就是可以作为一个逻辑单元对待的一组JavaScript代码。使用函数可以使代码更为简洁，提高重用性。在JavaScript中，大约95%的代码都是包含在函数中的，由此可见，函数在JavaScript中是非常重要的。

函数的定义

函数是由关键字function，函数名加一组参数以及置于大括号中需要执行的一段代码定义的。定义函数的基本语法如下：

function functionName([parameter 1,parameter 2,.....]){
	statements;
	[return expression;]
}

functionName：必选项，用于指定函数名。在同一个页面中，函数名必须是唯一的，并且区分大小写。
parameter：可选项，用于指定参数列表。当使用多个参数时，参数使用逗号进行分割。一个函数最多可以有255个参数。
statements：必选项，是函数体，用于实现函数功能的语句。
expression：可选项，用于返回函数值。expression为任意的表达式，变量或常量。
例如，定义一个用于计算商品金额的函数account()，该函数有两个参数，用于指定单价和数量，返回值为计算后的金额。具体代码如下：

function account(price,number){
	var sum = price*number;	//计算金额
	return sum;				//返回计算后的金额
}

函数的调用

函数的调用比较简单，如果要调用不带参数的函数，使用函数名加上括号即可；如果要调用的函数带参数，则在括号中加上需要传递的参数。如果包含多个参数，各参数之间用逗号分割。
对上面的例子，可以通过以下代码进行调用：

account(10.6,10);

在JavaScript中，由于函数名区分大小写，在调用函数时也需要注意函数名的大小写。

事件

JavaScript可以以事件驱动的方式直接对客户端的输入做出响应，无需经过服务器端程序。也就是说，JavaScript是事件驱动的，它可以使在图形界面环境下的一切操作变得简单化。
JavaScript与Web页面之间的交互是通过用户操作浏览器页面时触发相关事件来实现的。例如，在页面载入完毕时将触发onload时间，当用户单击按钮时将触发按钮的onclick事件等。事件处理程序则是用于响应某个事件而执行的处理程序。时间处理程序可以使任意JavaScript语句，通常使用特定的自定义函数来对时间进行处理。

JavaScript中常用事件

多数浏览器内部对象都拥有很多时间，下面将以表格的形式给出常用的时间及何时触发这些事件。

事件处理程序的调用

在使用事件处理程序对页面进行操作时，最主要的是如何通过对象的事件来制定事件处理程序。指定方式主要有以下两种。
1.在JavaScript中
在JavaScript中调用时间处理程序，首先需要获得要处理对象的引用，然后将要执行的处理函数赋值给对应的事件。例：

<input id = "bt_save" type = "button" value = "保存">
	<script>
		var b_save=document.getElementById("bt_save");
		b_save.onclick = function(){
		alert("单击了保存按钮")
}
	</script>

在页面中加入上面的代码并运行，当单击“保存”按钮时，将弹出“淡季了保存按钮”对话框。
在上面的泰马中，一定要将<input id = "bt_save" type = "button" value = "保存">放在JavaScript代码的上方，否则将弹出“b_save”为空或者不是对象的错误指示。在JavaScript中指定时间处理程序时，事件名称必须为小写，才能正确响应事件。
2.在HTML中
在HTML中分配事件处理程序，只需要在HTML标记中添加相应的事件，并在其中指定要执行的代码或函数名即可。

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

在页面中加入上面的代码并运行，当单击“保存”按钮时，将弹出“单击了保存按钮”对话框。