Javascriptの基本チュートリアルのイベントモデル

インラインモデル

インラインモデルとは:

このモデルは、時間を処理するための伝統的で最も簡単な方法です。イベント処理関数は、指定されたイベントを処理するために使用されます

初期の頃はもっと使われていましたが、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>

提出するリセットコード

自動運転