jQuery-イベント処理

イベントを使用して動的なWebページを作成できます。イベントは、Webアプリケーションで検出できるアクションです。

以下はイベントの例です-

マウスクリック
Webページの読み込み
要素の上にマウスを置く
HTMLフォームを送信する
キーボードなどのキーストローク

これらのイベントがトリガーされると、カスタム関数を使用して、イベントで必要なことをほとんど実行できます。これらのカスタム関数は、イベントハンドラーを呼び出します。

イベントハンドラーのバインド

jQueryイベントモデルを使用して、次のように* bind（）*メソッドでDOM要素にイベントハンドラを確立できます-

<html>
   <head>
      <title>The jQuery Example</title>
      <script type = "text/javascript"
         src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js">
      </script>

      <script type = "text/javascript" language = "javascript">
         $(document).ready(function() {
            $('div').bind('click', function( event ){
               alert('Hi there!');
            });
         });
      </script>

      <style>
         .div{ margin:10px;padding:12px; border:2px solid #666; width:60px;}
      </style>
   </head>

   <body>
      <p>Click on any square below to see the result:</p>

      <div class = "div" style = "background-color:blue;">ONE</div>
      <div class = "div" style = "background-color:green;">TWO</div>
      <div class = "div" style = "background-color:red;">THREE</div>
   </body>
</html>

このコードにより、部門要素がクリックイベントに応答します。その後、ユーザーがこの部門内をクリックすると、アラートが表示されます。

これにより、次の結果が生成されます–

bind（）コマンドの完全な構文は次のとおりです-

selector.bind( eventType[, eventData], handler)

以下は、パラメータの説明です-

eventType -クリックや送信などのJavaScriptイベントタイプを含む文字列。イベントタイプの完全なリストについては、次のセクションを参照してください。
eventData -これはオプションのパラメーターであり、イベントハンドラーに渡されるデータのマップです。
handler -イベントがトリガーされるたびに実行する関数。

イベントハンドラーの削除

通常、イベントハンドラーが確立されると、ページの残りの期間は有効になります。イベントハンドラを削除する必要がある場合があります。

jQueryは、既存のイベントハンドラーを削除する* unbind（）*コマンドを提供します。 unbind（）の構文は次のとおりです-

selector.unbind(eventType, handler)

or

selector.unbind(eventType)

以下は、パラメータの説明です-

eventType -クリックや送信などのJavaScriptイベントタイプを含む文字列。イベントタイプの完全なリストについては、次のセクションを参照してください。
handler -提供される場合、削除される特定のリスナーを識別します。

イベントの種類

以下はクロスプラットフォームであり、JQueryを使用してバインドできる推奨イベントタイプです-

Sr.No.	Event Type & Description
1	blur 要素がフォーカスを失ったときに発生します。
2	change 要素が変更されたときに発生します。
3	click マウスがクリックされたときに発生します。
4	dblclick マウスがダブルクリックされたときに発生します。
5	error ロードまたはアンロードなどでエラーが発生したときに発生します。
6	focus 要素がフォーカスを取得すると発生します。
7	keydown キーが押されたときに発生します。
8	keypress キーが押されて離されたときに発生します。
9	keyup キーが離されたときに発生します。
10	load ドキュメントがロードされたときに発生します。
11	mousedown マウスボタンが押されたときに発生します。
12	mouseenter マウスが要素領域に入ると発生します。
13	mouseleave マウスが要素領域から離れたときに発生します。
14	mousemove マウスポインターが移動したときに発生します。
15	mouseout マウスポインターが要素から出たときに発生します。
16	mouseover マウスポインターが要素上を移動すると発生します。
17	mouseup マウスボタンが離されたときに発生します。
18	resize ウィンドウのサイズが変更されたときに発生します。
19	scroll ウィンドウがスクロールされたときに発生します。
20	select テキストが選択されたときに発生します。
21	submit フォームが送信されたときに発生します。
22	unload ドキュメントがアンロードされると発生します。

イベントオブジェクト

コールバック関数は単一のパラメーターを取ります。ハンドラーが呼び出されると、JavaScriptイベントオブジェクトが渡されます。

多くの場合、イベントオブジェクトは不要であり、パラメーターが省略されます。これは、ハンドラーがトリガーされたときに何をする必要があるかをハンドラーが正確に把握するために十分なコンテキストが通常利用できるためですが、アクセスする必要がある特定の属性があります。

イベント属性

次のイベントプロパティ/属性が利用可能であり、プラットフォームに依存しない方法で安全にアクセスできます-

Sr.No.	Property & Description
1	altKey イベントがトリガーされたときにAltキーが押された場合はtrue、そうでない場合はfalseに設定します。 Altキーには、ほとんどのMacキーボードのオプションというラベルが付いています。
2	ctrlKey イベントがトリガーされたときにCtrlキーが押された場合はtrue、そうでない場合はfalseに設定します。
3	data ハンドラーが確立されたときにbind（）コマンドに2番目のパラメーターとして渡された値（ある場合）。
4	keyCode キーアップおよびキーダウンイベントの場合、これは押されたキーを返します。
5	metaKey イベントがトリガーされたときにメタキーが押された場合はtrue、そうでない場合はfalseに設定します。 Metaキーは、PCではCtrlキー、MacではCommandキーです。
6	pageX マウスイベントの場合、ページの原点を基準としたイベントの水平座標を指定します。
7	pageY マウスイベントの場合、ページの原点を基準としたイベントの垂直座標を指定します。
8	relatedTarget 一部のマウスイベントでは、イベントがトリガーされたときにカーソルが離れたまたは入力した要素を識別します。
9	screenX マウスイベントの場合、画面の原点を基準としたイベントの水平座標を指定します。
10	screenY マウスイベントの場合、画面の原点からの相対イベントの垂直座標を指定します。
11	shiftKey イベントがトリガーされたときにShiftキーが押された場合はtrue、そうでない場合はfalseに設定します。
12	target イベントがトリガーされた要素を識別します。
13	timeStamp イベントが作成されたときのタイムスタンプ（ミリ秒）。
14	type すべてのイベントについて、トリガーされたイベントのタイプ（クリックなど）を指定します。
15	which キーボードイベントの場合は、イベントを発生させたキーの数値コードを指定し、マウスイベントの場合は、押されたボタンを指定します（左に1、中央に2、右に3）。

<html>
   <head>
      <title>The jQuery Example</title>
      <script type = "text/javascript"
         src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js">
      </script>

      <script type = "text/javascript" language = "javascript">
         $(document).ready(function() {
            $('div').bind('click', function( event ){
               alert('Event type is ' + event.type);
               alert('pageX : ' + event.pageX);
               alert('pageY : ' + event.pageY);
               alert('Target : ' + event.target.innerHTML);
            });
         });
      </script>

      <style>
         .div{ margin:10px;padding:12px; border:2px solid #666; width:60px;}
      </style>
   </head>

   <body>
      <p>Click on any square below to see the result:</p>

      <div class = "div" style = "background-color:blue;">ONE</div>
      <div class = "div" style = "background-color:green;">TWO</div>
      <div class = "div" style = "background-color:red;">THREE</div>
   </body>
</html>

これにより、次の結果が生成されます–

イベントメソッド

イベントオブジェクトで呼び出すことができるメソッドのリストがあります-

Sr.No.	Method & Description
1	preventDefault() ブラウザがデフォルトのアクションを実行できないようにします。
2	isDefaultPrevented() このイベントオブジェクトでevent.preventDefault（）が呼び出されたかどうかを返します。
3	stopPropagation() 親要素へのイベントのバブリングを停止し、親ハンドラーにイベントが通知されないようにします。
4	isPropagationStopped() このイベントオブジェクトでevent.stopPropagation（）が呼び出されたかどうかを返します。
5	stopImmediatePropagation() 残りのハンドラーの実行を停止します。
6	isImmediatePropagationStopped() このイベントオブジェクトでevent.stopImmediatePropagation（）が呼び出されたかどうかを返します。

イベント操作方法

次の表は、重要なイベント関連の方法を示しています-

Sr.No.	Method & Description
1	bind( type, [data, fn )] 一致した要素ごとに1つ以上のイベント（クリックなど）にハンドラーをバインドします。カスタムイベントをバインドすることもできます。
2	off( events [, selector [, handler(eventObject) ] )] これはライブの反対で、バインドされたライブイベントを削除します。
3	hover( over, out ) たとえば、オブジェクトをマウスでオン/オフするホバリングをシミュレートします。
4	on( events [, selector [, data ], handler )] 現在および将来的に一致するすべての要素のハンドラーをイベント（クリックなど）にバインドします。カスタムイベントをバインドすることもできます。
5	one( type, [data, fn )] 一致した要素ごとに1回実行される1つ以上のイベントにハンドラーをバインドします。
6	ready( fn ) DOMを走査して操作する準備ができたときに実行される関数をバインドします。
7	trigger( event, [data )] 一致したすべての要素でイベントをトリガーします。
8	triggerHandler( event, [data )] 要素上のすべてのバインドされたイベントハンドラーをトリガーします。
9	unbind( [type, [fn] )] これはバインドの反対で、一致した各要素からバインドされたイベントを削除します。

イベントヘルパーメソッド

jQueryは、イベントをトリガーして上記のイベントタイプをバインドするために使用できるイベントヘルパー関数のセットも提供します。

トリガーメソッド

以下は、すべての段落でぼかしイベントをトリガーする例です-

$("p").blur();

バインド方法

以下は、すべての<div>で click イベントをバインドする例です-

$("div").click( function () {
  //do something here
});

これはjQueryによって提供されるすべてのサポートメソッドの完全なリストです-

Sr.No.	Method & Description
1	blur( ) 一致した各要素のblurイベントをトリガーします。
2	blur( fn ) 一致した各要素のblurイベントに関数をバインドします。
3	change( ) 一致した各要素の変更イベントをトリガーします。
4	change( fn ) 一致した各要素の変更イベントに関数をバインドします。
5	click( ) 一致した各要素のクリックイベントを発生させます。
6	click( fn ) 一致した各要素のクリックイベントに関数をバインドします。
7	dblclick( ) 一致した各要素のdblclickイベントをトリガーします。
8	dblclick( fn ) 一致した各要素のdblclickイベントに関数をバインドします。
9	error( ) 一致した各要素のエラーイベントをトリガーします。
10	error( fn ) 一致した各要素のエラーイベントに関数をバインドします。
11	focus( ) 一致した各要素のフォーカスイベントをトリガーします。
12	focus( fn ) 一致した各要素のフォーカスイベントに関数をバインドします。
13	keydown( ) 一致した各要素のkeydownイベントをトリガーします。
14	keydown( fn ) 一致した各要素のkeydownイベントに関数をバインドします。
15	keypress( ) 一致した各要素のkeypressイベントをトリガーします。
16	keypress( fn ) 一致した各要素のkeypressイベントに関数をバインドします。
17	keyup( ) 一致した各要素のキーアップイベントをトリガーします。
18	keyup( fn ) 一致した各要素のキーアップイベントに関数をバインドします。
19	load( fn ) 一致した各要素のロードイベントに関数をバインドします。
20	mousedown( fn ) 一致した各要素のmousedownイベントに関数をバインドします。
21	mouseenter( fn ) 一致した各要素のmouseenterイベントに関数をバインドします。
22	mouseleave( fn ) 一致した各要素のmouseleaveイベントに関数をバインドします。
23	mousemove( fn ) 一致した各要素のmousemoveイベントに関数をバインドします。
24	mouseout( fn ) 一致した各要素のmouseoutイベントに関数をバインドします。
25	mouseover( fn ) 一致した各要素のmouseoverイベントに関数をバインドします。
26	mouseup( fn ) 一致した各要素のmouseupイベントに関数をバインドします。
27	resize( fn ) 一致した各要素のサイズ変更イベントに関数をバインドします。
28	scroll( fn ) 一致した各要素のスクロールイベントに関数をバインドします。
29	select( ) 一致した各要素の選択イベントをトリガーします。
30	select( fn ) 一致した各要素の選択イベントに関数をバインドします。
31	submit( ) 一致した各要素の送信イベントをトリガーします。
32	submit( fn ) 一致した各要素の送信イベントに関数をバインドします。
33	unload( fn ) 一致した各要素のアンロードイベントに関数をバインドします。

Jquery-events

目次