Model acara tutorial asas Javascript

Model sebaris

Apakah model sebaris:

Model ini ialah kaedah A tradisional dan paling mudah masa pemprosesan. Fungsi pengendalian acara ialah atribut HTML, digunakan untuk mengendalikan acara tertentu

Sebaris lebih banyak digunakan pada masa awal, tetapi ia bercampur dengan kod HTML dan tidak berfungsi kod

Kod berikut:

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

Kod di atas adalah model sebaris terawal onclick ialah acara klik

Jika kod sentimeter acara akan menjadi banyak, maka kami Kami perlu menulisnya dengan cara lain. Kodnya adalah seperti berikut:

<!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>

Dengan cara ini, kita boleh menulis banyak kod dalam badan fungsi kita

Model skrip

Apakah model skrip

Dalam halaman HTML, kami tidak nak lihat menulis kod js, kod js , kita letak dalam fail lain

Mari kita lihat contoh

Mula-mula kita tulis html kod, kodnya adalah seperti berikut:

<!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>

Untuk kod di atas, kami memperkenalkan fail js, demo.js Kod demo.js adalah seperti berikut:

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

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

Meneruskan pembelajaran

fail baharu

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

serahkan Tetapkan Semula Kod

Operasi automatik