Javascript 基础教程...LOGIN

Javascript 基础教程之事件模型

内联模型

什么是内联模型:

这种模型是传统的最简单的一种处理时间的方法,事件处理函数是HTML的一个属性,用于处理指定的事件

内联在早期是使用比较多的,但是它和HTML 代码混合在一起,并没有与HTML 代码分离

如下代码:

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>事件</title>	
</head>
<body>
	<input type="button" value="按钮" onclick="alert('lee')">
</body>
</html>

以上代码就是最早期的内联模型 onclick  是一个点击事件

如果事件厘米的代码会很多,那么我们就要使用另外一种方式来写,代码如下:

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>事件</title>	
</head>
<body>
	<input type="button" value="按钮" onclick="msg()">

	<script type="text/javascript">
		function msg(){
			alert("欢迎来到php中文网学习");
		}
	</script>
</body>
</html>

这样我们的函数体内就可以写很多的代码了


脚本模型

什么是脚本模型

在HTML 页面,我们不要看见写js代码,js 的代码,我们是放另外一个文件中的

下面来看一个实例

首先我们写一个html 的代码,代码如下:

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>事件</title>	
	<script type="text/javascript" src="demo.js"></script>
</head>
<body>
	<input type="button" value="按钮">
</body>
</html>

上述代码我们引入了一个js文件,demo.js  , demo.js的代码如下:

window.onload = function(){
	var sum = document.getElementsByTagName("input")[0];
	sum.onclick= msg;
}

function msg(){
	alert("php 中文网");
}


下一节
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>事件</title> </head> <body> <input type="button" value="按钮" onclick="alert('欢迎学习js事件')"> </body> </html>
提交重置代码
章节课件