イベントメソッド内のthis

画面の各部分をクリックしてイベントを確認してみてください。。

div
記事へ戻る --- 愚鈍人ホーム
JavaScriptの参考書 ／  Ajaxの参考書 ／  HTMLの参考書 ／  CSSの参考書

 

htmlソース

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>イベントメソッド内のthis</title>
<link href="/gudon/css/default.css" rel="stylesheet" type="text/css" />
<link href="/gudon/rd/ajax/html/form1_this.css" rel="stylesheet" type="text/css" />
</head>
<body>
<h1>イベントメソッド内のthis</h1>
<hr />
<p>画面の各部分をクリックしてイベントを確認してみてください。。</p>
<!-- thisはform1を示す -->
<form id="form1" name="form1" onclick="alert(this.name);">
	<!-- thisはtextbox1を示す -->
	<input name="textbox1" type="text" value="テキストボックス1"
		onclick="alert(this.name);"/>
		
	<input name="textbox2" type="text" value="テキストボックス2"/>

	<!-- this.formはtextbox1を含むformを示す -->
	<input name="button1" type="button" value="ボタン1"
		onclick="button1_onclick(this.form);"/>
</form>
<!-- thisはdivを示す -->
<div id="div1" onclick="alert(this.innerHTML);">
	div
</div>
<script type="text/javascript">
	document.form1.textbox2.onclick=function(){
		// thisはtextbox2を示す
		alert(this.name);
	}
	
	function button1_onclick(form1){
		alert(form1.textbox1.value);
	}
</script>
</body>
</html>