JavaScriptのお勉強 - onclick イベントに関数を割当てよう

フロントエンドエンジニア JavaScript

f:id:fushimik:20130327192010g:plain

その１　a をクリックすると、メッセージを出す


html インラインで書いてみる

<!doctype html>
<html lang="ja">
<head>
	<meta charset="UTF-8">
	<title>javaScript</title>
</head>
<body>
		<a href="#" onclick="alert('No.0が押されました');">No.0</a><br>
		<a href="#" onclick="alert('No.1が押されました');">No.1</a><br>
		<a href="#" onclick="alert('No.2が押されました');">No.2</a><br>
</body>
</html>

その２　head内に書いてみる


普通に書いてみる。

<!doctype html>
<html lang="ja">
<head>
	<meta charset="UTF-8">
	<title>javaScript</title>
	<script>
		// 実行する関数
		function disp(aRel) {
			alert(aRel + "が押されました");
		}

		// 要素の取得
		var btns = document.getElementsByTagName('a');

		// イベントに関数を割り当てる
		btns[0].onclick = function(){
			var aRel = this.getAttribute('rel');
			disp(aRel);
		};
		btns[1].onclick = function(){
			var aRel = this.getAttribute('rel');
			disp(aRel);
		};
		btns[2].onclick = function(){
			var aRel = this.getAttribute('rel');
			disp(aRel);
		};

	</script>
</head>
<body>
		<a href="#" rel="No.0">No.0</a><br>
		<a href="#" rel="No.1">No.1</a><br>
		<a href="#" rel="No.2">No.2</a><br>
</body>
</html>

なぜ動かない？

その３　動くタイミング


DOMが形成されてから、実行されるようにする

要素の取得～イベントに関数を割り当てる部分を
window.onload = function() {・・・};
で囲んでみる

<!doctype html>
<html lang="ja">
<head>
	<meta charset="UTF-8">
	<title>javaScript</title>
	<script>
		// 実行する関数
		function disp(aRel) {
			alert(aRel + "が押されました");
		}

		// DOMが形成されてから実行する
		window.onload = function() {

			// 要素の取得
			var btns = document.getElementsByTagName('a');

			// イベントに関数を割り当てる
			btns[0].onclick = function(){
				var aRel = this.getAttribute('rel');
				disp(aRel);
			};
			btns[1].onclick = function(){
				var aRel = this.getAttribute('rel');
				disp(aRel);
			};
			btns[2].onclick = function(){
				var aRel = this.getAttribute('rel');
				disp(aRel);
			};

		};

	</script>
</head>
<body>
		<a href="#" rel="No.0">No.0</a><br>
		<a href="#" rel="No.1">No.1</a><br>
		<a href="#" rel="No.2">No.2</a><br>
</body>
</html>


動いた！

その４　コードを効率化


イベントの割当をループにする３つの a 要素に、それぞれイベントを割り当てる必要があるので、
３回書いていたが、 それを for文の繰り返しで記入する。

<!doctype html>
<html lang="ja">
<head>
	<meta charset="UTF-8">
	<title>javaScript</title>
	<script>
		// 実行する関数
		function disp(aRel) {
			alert(aRel + "が押されました");
		}

		// DOMが形成されてから実行する
		window.onload = function() {

			// 要素の取得
			var btns = document.getElementsByTagName('a');

			// イベントに関数を割り当てる
			for(var i = 0; i < 3; i++) {
				btns[i].onclick = function(){
					var aRel = this.getAttribute('rel');
					disp(aRel);
				};
			}

		};

	</script>
</head>
<body>
		<a href="#" rel="No.0">No.0</a><br>
		<a href="#" rel="No.1">No.1</a><br>
		<a href="#" rel="No.2">No.2</a><br>
</body>
</html>