jQuery-イベント処理

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

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

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

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

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

jQueryイベントモデルを使用して、DOM要素にイベントハンドラーを確立できます。 bind() 次のような方法-

<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 −提供されている場合、削除する特定のリスナーを識別します。

イベントタイプ

シニア番号 イベントの種類と説明
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イベントオブジェクトがハンドラーを通過します。

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

イベント属性

シニア番号 プロパティと説明
1

altKey

イベントがトリガーされたときにAltキーが押された場合はtrueに設定し、そうでない場合はfalseに設定します。Altキーは、ほとんどのMacキーボードでOptionというラベルが付いています。
2

ctrlKey

イベントがトリガーされたときにCtrlキーが押された場合はtrueに設定し、そうでない場合はfalseに設定します。
3

data

ハンドラーが確立されたときに、bind（）コマンドに2番目のパラメーターとして渡された値（存在する場合）。
4

keyCode

キーアップおよびキーダウンイベントの場合、これは押されたキーを返します。
5

metaKey

イベントがトリガーされたときにメタキーが押された場合はtrueに設定し、そうでない場合はfalseに設定します。メタキーは、PCではCtrlキー、Macではコマンドキーです。
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>

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

イベントメソッド

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

シニア番号 方法と説明
1 PreventDefault（）

ブラウザがデフォルトのアクションを実行できないようにします。
2 isDefaultPrevented（）

このイベントオブジェクトでevent.preventDefault（）が呼び出されたことがあるかどうかを返します。
3 stopPropagation（）

親要素へのイベントのバブリングを停止し、親ハンドラーにイベントが通知されないようにします。
4 isPropagationStopped（）

このイベントオブジェクトでevent.stopPropagation（）が呼び出されたことがあるかどうかを返します。
5 stopImmediatePropagation（）

残りのハンドラーの実行を停止します。
6 isImmediatePropagationStopped（）

このイベントオブジェクトでevent.stopImmediatePropagation（）が呼び出されたことがあるかどうかを返します。

イベント操作方法

次の表に、重要なイベント関連のメソッドを示します。

シニア番号 方法と説明
1 bind（type、[data]、fn）

一致した要素ごとに、ハンドラーを1つ以上のイベント（クリックなど）にバインドします。カスタムイベントをバインドすることもできます。
2 off（イベント[、セレクター] [、ハンドラー（イベントオブジェクト）]）

これはライブの反対を行い、バインドされたライブイベントを削除します。
3 hover（over、out）

たとえば、オブジェクト上でマウスを動かしたり、オブジェクトから離れたりするホバリングをシミュレートします。
4 on（イベント[、セレクター] [、データ]、ハンドラー）

現在および将来一致するすべての要素のイベント（クリックなど）にハンドラーをバインドします。カスタムイベントをバインドすることもできます。
5 one（type、[data]、fn）

ハンドラーを1つ以上のイベントにバインドして、一致した要素ごとに1回実行します。
6 ready（fn）

DOMをトラバースして操作する準備ができたときに実行される関数をバインドします。
7 trigger（イベント、[データ]）

一致したすべての要素でイベントをトリガーします。
8 triggerHandler（イベント、[データ]）

要素のすべてのバインドされたイベントハンドラーをトリガーします。
9 unbind（[type]、[fn]）

これはバインドの反対を行い、一致した各要素からバインドされたイベントを削除します。

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

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

トリガーメソッド

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

$("p").blur();

製本方法

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

$("div").click( function () { 
   // do something here
});
シニア番号 方法と説明
1

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( )

一致した各要素のキーダウンイベントをトリガーします。
14

keydown( fn )

一致した各要素のキーダウンイベントに関数をバインドします。
15

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 )

一致した各要素のマウスオーバーイベントに関数をバインドします。
26

mouseup( fn )

一致した各要素のmouseupイベントに関数をバインドします。
27

resize( fn )

一致した各要素のサイズ変更イベントに関数をバインドします。
28

scroll( fn )

一致した各要素のスクロールイベントに関数をバインドします。
29

select( )

一致した各要素の選択イベントをトリガーします。
30

select( fn )

一致した各要素のselectイベントに関数をバインドします。
31

submit( )

一致した各要素の送信イベントをトリガーします。
32

submit( fn )

一致した各要素の送信イベントに関数をバインドします。
33

unload( fn )

一致した各要素のアンロードイベントに関数をバインドします。
ja/tutorial
es/tutorial
de/tutorial
fr/tutorial
th/tutorial
pt/tutorial
ru/tutorial
vi/tutorial
it/tutorial
ko/tutorial
tr/tutorial
id/tutorial
pl/tutorial
hi/tutorial
japost
espost
depost
frpost
thpost
ptpost
rupost
vipost
itpost
kopost
trpost
idpost
plpost
hipost

© Copyright 2021 - 2024 | All Rights Reserved