情報学部 菅沼ホーム 目次 索引

event オブジェクト

［機能］

　　イベントの処理

［イベントハンドラ］

  1. onAbort　　画像の読み込みを中断した時
  2. onBlur　　フォーカスが外れた時
  3. onChange　　フォーム要素の選択や入力内容が変更された時
  4. onClick　　マウスでクリックした時
  5. onDblClick　　マウスでダブルクリックした時
  6. onDragDrop マウスでドラッグ＆ドロップした時
  7. onError　　画像の読み込み中にエラーが発生した時
  8. onFocus　　フォーカスが入った時
  9. onKeyDown　　キーを押した時
  10. onKeyPress　　キーを押してる時
  11. onKeyUp　　押していたキーをあげた時
  12. onLoad　　ページや画像の読み込みが完了した時
  13. onMouseDown マウスボタンを押し下げた時
  14. onMouseMove マウスを動かしている時
  15. onMouseOut マウスが離れた時
  16. onMouseOver マウスが乗った時
  17. onMouseUp マウスボタンを離した時
  18. onReset　　フォームがリセットされた時
  19. onSelect　　テキストが選択された時
  20. onSelectStart　　ページ内の要素が選択されようとした時
  21. onSubmit　　フォームを送信しようとした時
  22. onUnload　　ウィンドウを閉じた時，他のページに切り替えた時，ページをリロード（更新）した時

［プロパティ］

  1. event.altKey　　Alt キーが押されていたか否か
  2. event.button　　マウスボタンの種類
  3. event.clientX　　Window 上の X 座標
  4. event.clientY　　Window 上の Y 座標
  5. event.ctrlKey　　Ctrl キーが押されていたか否か
  6. event.keyCode　　キーコード
  7. event.offsetX　　イベントが発生した要素上の X 軸の値
  8. event.offsetY　　イベントが発生した要素上の Y 軸の値
  9. event.pageX　　ページ上の X 座標
  10. event.pageY　　ページ上の Y 座標
  11. event.screenX　　ディスプレイ上のＸ軸の値
  12. event.screenY　　ディスプレイ上のＹ軸の値
  13. event.shiftKey　　Shift キーが押されていたか否か
  14. event.target　　最初に送られたオブジェクト
  15. event.type　　イベントの種類
  16. event.which　　マウスボタンの種類
  17. event.x　　ページ上の X 座標
  18. event.y　　ページ上の Y 座標

　　イベント処理を行うには，以下に示すように，HTML 内にたとえばマウスが押されたときの処理を行う関数を指定するか（上の例），または，処理内容が簡単な場合は，要素内にスクリプトを記述する（下の例）方法がある． 
<INPUT ID="button1" TYPE="button" VALUE="ボタン" onMouseDown="func(event)">　（プログラム１の方法１）
<INPUT ID="button2" TYPE="button" VALUE="ボタン" onMouseDown="JavaScript: alert('イベントの種類： ' + event.type)">　（プログラム１の方法２）
　　また，使用例のプログラム１の方法３に示すように，JavaScript のプログラム内において，各要素にイベントを付加する方法もある．

［使用例］

  1. プログラム１（下がそのソースコード）は，マウスが押されたときの処理の例である．イベント処理を，いくつかの方法で記述している．

    • 方法１：　INPUT 要素の onMouseDown 属性に，クリック時に呼ばれる関数 func を設定している（ 53 行目）

    • 方法２：　INPUT 要素の onMouseDown 属性に，直接処理すべき内容（ alert 関数）を記述している（ 54 行目）

    • 方法３－１：　INPUT 要素には onMouseDown 属性を記述せず（ 55 行目），ページが表示された時点で，onMouseDown 属性にクリック時に呼ばれる関数 func を設定している（ 62 行目～ 64 行目）

    • 方法３－２：　INPUT 要素には onMouseDown 属性を記述せず（ 56 行目），addEventListener メソッドによって，クリック時に呼ばれる関数 func を設定している（ 66 行目）

    • 方法３－３：　INPUT 要素には onMouseDown 属性を記述せず（ 57 行目），addEventListener メソッドによって，クリック時における処理を記述し，その中で関数 func を呼んでいる（ 68 行目～ 70 行目） 
    01	<!DOCTYPE HTML>
02	
03	<HTML>
04	<HEAD>
05		<TITLE>event</TITLE>
06		<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=utf-8">
07		<META NAME=viewport CONTENT="width=device-width, initial-scale=1">
08		<LINK REL="stylesheet" TYPE="text/css" HREF="../../../master.css">
09		<SCRIPT TYPE="text/javascript">
10			function func(e)
11			{
12				let nw = open("", "new_page");
13				nw.document.open();
14				nw.document.writeln('<HTML>');
15				nw.document.writeln('<HEAD>');
16				nw.document.writeln('	<TITLE>イベント処理</TITLE>');
17				nw.document.writeln('	<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=utf-8">');
18				nw.document.writeln('	<LINK REL="stylesheet" TYPE="text/css" HREF="../../../master.css">');
19				nw.document.writeln('</HEAD>');
20				nw.document.writeln('<BODY CLASS="white">');
21				nw.document.write("	イベントの種類： " + e.type + "<BR>");
22				nw.document.write("	　　最初に送られたオブジェクト( target )： " + e.target + "<BR>");
23				nw.document.write("	　　マウスボタンの種類( which )： " + e.which + "<BR>");
24				nw.document.write("	　　マウスボタンの種類( button )： " + e.button + "<BR>");
25				nw.document.write("	　　キーコード( keyCode )： " + e.keyCode + "<BR>");
26				nw.document.write("	　　Shift キー( shiftKey )： " + e.shiftKey + "<BR>");
27				nw.document.write("	　　Ctrl キー( ctrlKey )： " + e.ctrlKey + "<BR>");
28				nw.document.write("	　　Alt キー( altKey )： " + e.altKey + "<BR>");
29				nw.document.write("	　　ディスプレイ上の X 軸の値( screenX )： " + e.screenX + "<BR>");
30				nw.document.write("	　　ディスプレイ上の Y 軸の値( screenY )： " + e.screenY + "<BR>");
31				nw.document.write("	　　イベントが発生した要素上の X 軸の値( offsetX )： " + e.offsetX + "<BR>");
32				nw.document.write("	　　イベントが発生した要素上の Y 軸の値( offsetY )： " + e.offsetY + "<BR>");
33				nw.document.write("	　　Window 上の X 座標( clientX )： " + e.clientX + "<BR>");
34				nw.document.write("	　　Window 上の Y 座標( clientY )： " + e.clientY + "<BR>");
35				nw.document.write("	　　ページ上の X 座標( pageX )： " + e.pageX + "<BR>");
36				nw.document.write("	　　ページ上の Y 座標( pageY )： " + e.pageY + "<BR>");
37				nw.document.write("	　　ページ上の X 座標( x )： " + e.x + "<BR>");
38				nw.document.write("	　　ページ上の Y 座標( y )： " + e.y + "<BR>");
39				nw.document.writeln('</BODY>');
40				nw.document.writeln('</HTML>');
41				nw.document.close();
42			}
43	
44			function func3_2(e)
45			{
46				func(e);
47			}
48		</SCRIPT>
49	</HEAD>
50	<BODY CLASS="white">
51		<H1 STYLE="text-align: center">マウスイベント</H1>
52		<FORM><P STYLE="text-align: center">
53			<INPUT ID="button1" TYPE="button" VALUE="方法１" onMouseDown="func(event)">　
54			<INPUT ID="button2" TYPE="button" VALUE="方法２" onMouseDown="JavaScript: alert('event.type : ' + event.type);">　
55			<INPUT ID="button3_1" TYPE="button" VALUE="方法３－１">　
56			<INPUT ID="button3_2" TYPE="button" VALUE="方法３－２">　
57			<INPUT ID="button3_3" TYPE="button" VALUE="方法３－３">
58		</P></FORM>
59		<SCRIPT TYPE="text/javascript">
60				// ロード時にイベントリスナを追加
61						// onMouseDown 属性に関数を直接設定
62			document.getElementById("button3_1").onmousedown = function(e) {
63				func(e);
64			};
65						// 関数を外部に記述
66			document.getElementById("button3_2").addEventListener("mousedown", func3_2, false);
67						// 関数を以下のように内部に記述
68			document.getElementById("button3_3").addEventListener("mousedown", function(e) {
69				func(e);
70			}, false);
71		</SCRIPT>
72	</BODY>
72	</HTML>

  2. プログラム２（下がそのソースコード）は，キーが押されたときの処理の例である（ BODY 要素において onKeyDown 属性を指定）．この例のように，TABINDEX 属性の指定も行っておくべきである．

    <!DOCTYPE HTML>

<HTML>
<HEAD>
	<TITLE>event</TITLE>
	<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=utf-8">
	<META NAME=viewport CONTENT="width=device-width, initial-scale=1">
	<LINK REL="stylesheet" TYPE="text/css" HREF="../../../master.css">
	<SCRIPT TYPE="text/javascript">
		function func(e)
		{
			let nw = open("", "new_page");
			nw.document.open();
			nw.document.writeln('<HTML>');
			nw.document.writeln('<HEAD>');
			nw.document.writeln('	<TITLE>イベント処理</TITLE>');
			nw.document.writeln('	<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=utf-8">');
			nw.document.writeln('	<LINK REL="stylesheet" TYPE="text/css" HREF="../../../master.css">');
			nw.document.writeln('</HEAD>');
			nw.document.writeln('<BODY CLASS="white">');
			nw.document.write("	イベントの種類： " + e.type + "<BR>");
			nw.document.write("	　　最初に送られたオブジェクト( target )： " + e.target + "<BR>");
			nw.document.write("	　　マウスボタンの種類( which )： " + e.which + "<BR>");
			nw.document.write("	　　マウスボタンの種類( button )： " + e.button + "<BR>");
			nw.document.write("	　　キーコード( keyCode )： " + e.keyCode + "<BR>");
			nw.document.write("	　　Shift キー( shiftKey )： " + e.shiftKey + "<BR>");
			nw.document.write("	　　Ctrl キー( ctrlKey )： " + e.ctrlKey + "<BR>");
			nw.document.write("	　　Alt キー( altKey )： " + e.altKey + "<BR>");
			nw.document.write("	　　ディスプレイ上の X 軸の値( screenX )： " + e.screenX + "<BR>");
			nw.document.write("	　　ディスプレイ上の Y 軸の値( screenY )： " + e.screenY + "<BR>");
			nw.document.write("	　　イベントが発生した要素上の X 軸の値( offsetX )： " + e.offsetX + "<BR>");
			nw.document.write("	　　イベントが発生した要素上の Y 軸の値( offsetY )： " + e.offsetY + "<BR>");
			nw.document.write("	　　Window 上の X 座標( clientX )： " + e.clientX + "<BR>");
			nw.document.write("	　　Window 上の Y 座標( clientY )： " + e.clientY + "<BR>");
			nw.document.write("	　　ページ上の X 座標( pageX )： " + e.pageX + "<BR>");
			nw.document.write("	　　ページ上の Y 座標( pageY )： " + e.pageY + "<BR>");
			nw.document.write("	　　ページ上の X 座標( x )： " + e.x + "<BR>");
			nw.document.write("	　　ページ上の Y 座標( y )： " + e.y + "<BR>");
			nw.document.writeln('</BODY>');
			nw.document.writeln('</HTML>');
			nw.document.close();
		}
	</SCRIPT>
</HEAD>
<BODY CLASS="white" onKeyDown="func(event)" TABINDEX="1">
	<H1 STYLE="text-align: center">キーイベント</H1>
	<H3 STYLE="text-align: center">キーを押してください</H3>
</BODY>
</HTML>

情報学部 菅沼ホーム 目次 索引