Gemeinschaft Lernen Tools-Bibliothek Freizeit
suchen
Deutsch

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


Weiter lernen
||
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>事件</title> </head> <body> <input type="button" value="按钮" onclick="alert('欢迎学习js事件')"> </body> </html>
einreichenCode zurücksetzen
Vorherige Sektion nächsten Abschnitt
Tutorial-Liste
Hilfe bekommen
  • Kursempfehlungen
  • Kursunterlagen herunterladen
Die Kursunterlagen stehen derzeit nicht zum Download zur Verfügung. Die Mitarbeiter organisieren es derzeit. Bitte schenken Sie diesem Kurs in Zukunft mehr Aufmerksamkeit

Auch Studierende, die diesen Kurs gesehen haben, lernen

Das neueste Video-Tutorial zur Weltpremiere von ThinkPHP 5.1 (60 Tage zum Online-Schulungskurs zum PHP-Experten)  492894 spielt ab