静岡理工科大学 菅沼ホーム JavaScript 目次 索引

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  ディスプレイ上のX軸の値
  12. event.screenY  ディスプレイ上のY軸の値
  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)"> (プログラム1の方法1)
<INPUT ID="button2" TYPE="button" VALUE="ボタン" onMouseDown="JavaScript: alert('イベントの種類: ' + event.type)"> (プログラム1の方法2)
		
  また,使用例のプログラム1の方法3に示すように,JavaScript のプログラム内において,各要素にイベントを付加する方法もある.

[使用例]

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

    • 方法1: INPUT 要素の onMouseDown 属性に,クリック時に呼ばれる関数 func を設定している( 52 行目)

    • 方法2: INPUT 要素の onMouseDown 属性に,直接処理すべき内容( alert 関数)を記述している( 53 行目)

    • 方法3-1: INPUT 要素には onMouseDown 属性を記述せず( 54 行目),ページが表示された時点で,onMouseDown 属性にクリック時に呼ばれる関数 func を設定している( 61 行目~ 63 行目)

    • 方法3-2: INPUT 要素には onMouseDown 属性を記述せず( 55 行目),addEventListener メソッドによって,クリック時に呼ばれる関数 func を設定している( 65 行目)

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

    <!DOCTYPE HTML>
    
    <HTML>
    <HEAD>
    	<TITLE>event</TITLE>
    	<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=utf-8">
    	<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>
    			

静岡理工科大学 菅沼ホーム JavaScript 目次 索引