diadia

興味があることをやってみる。自分のメモを残しておきます。

イベントとイベントハンドラの設定

Javascript

ベース記事

Javascriptメモ
loadについて

イベントとイベントハンドラの設定方法の種類

２種類ある。

開始タグ内に両者を設置する方法
スクリプト内に両者を設置する方法（プロパティとして扱う）

1.開始タグ内に両者を設置する方法

<!DOCTYPE html>
<html lang="utf-8">
	<head>
		<meta charset="utf-8">
		<title>イベントとイベントハンドラ</title>

	</head>
	<body>
		<button type="submit" onclick="show();">表示する</button>
		<ol id="blank"></ol>

		<script>
			function show(){
				var blank = document.getElementById("blank");
				var make_li = document.createElement("li");
				var text =document.createTextNode("押すと増える");
				make_li.appendChild(text);
				blank.appendChild(make_li);
			}
			
		</script>
	</body>

注意点

イベントはonclickのonを除いたもの。今回はclick。

イベントハンドラはイベントが起きた際に処理を指図するもの。今回はshow();がイベントハンドラ。
イベントとイベントハンドラが開始タグに存在しているパターンである。

2.スクリプト内に両者を設置する方法（プロパティとして扱う）

<!DOCTYPE html>
<html lang="utf-8">
	<head>
		<meta charset="utf-8">
		<title>イベントとイベントハンドラ</title>

	</head>
	<body>
		<button id="btn" type="submit">表示する</button>
		<ol id="blank"></ol>

		<script>
				var btn = document.getElementById("btn");
			    btn.onclick = function(){
			    	var blank = document.getElementById("blank");
					var make_li = document.createElement("li");
					var text =document.createTextNode("押すと増える");
					make_li.appendChild(text);
					blank.appendChild(make_li);
								}
		</script>
	</body>

注意点

この方法はhtmlとjavascriptを区分けして書く方法。