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 中文网");
}