diadia

興味があることをやってみる。独学で勉強しています。初心者から始めたので困ったことを書いて同じ境遇の方のヒントになればと思います。

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

ベース記事

Javascriptメモ
loadについて

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

2種類ある。

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

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を区分けして書く方法。