jQuery API の bind( eventType, fn ) は、1つ目の引数に指定したイベントに、2つ目の引数に指定したイベントハンドラをバインドすることができるメソッド。
カスタムイベントにバインドすることもできる。
記述方法
jQuery( セレクター ) . bind( イベントタイプ, イベントハンドラ );
「セレクター」の要素の「イベントタイプ」のイベントに、「イベントハンドラ」をバインド。
eventType
1つ目の引数に指定できるイベントタイプと、そのイベントタイプの説明。
| eventType | 説明 |
|---|---|
| blur | 要素からフォーカスを外したとき。 |
| change | select 要素や、input 要素の値を変更したとき。 |
| click | 要素をクリックしたとき。 |
| dblclick | 要素をダブルクリックしたとき。 |
| error | エラーイベントが発生したとき。 |
| focus | 要素をフォーカスしたとき。 |
| keydown | 要素の領域内で、キーボタンを押したとき。 |
| keypress | 要素の領域内で、キーボタンを押したとき。 |
| keyup | 要素の領域内で、押し下げたキーボタンを上げたとき。 |
| load | 画像、スクリプトなど、サブ要素を全て読み込んだとき。 |
| mousedown | 要素の領域上でマウスのボタンを押したとき。 |
| mouseenter | マウスが要素の領域内に入ったとき。 |
| mouseleave | マウスが要素の領域内から離れたとき。 |
| mousemove | マウスを要素の領域上で動かしたとき。 |
| mouseout | マウスを要素の領域外へ動かしたとき。 |
| mouseover | マウスを要素の領域上で動かしたとき。 |
| mouseup | 要素の領域上でクリックボタンを押して放したとき。 |
| resize | ブラウザのウィンドウのサイズを変更したとき。 |
| scroll | 要素をスクロールしたとき。 |
| select | テキスト入力欄やテキストエリアにおけるテキストを選択したとき。 |
| submit | フォームを送信したとき。 |
| unload | ページから移動したとき。 |
実装例(サンプル)
実装例(サンプル)の動作について
- 黄色のボックスを、クリック、もしくは、ダブルクリックすると、背景色が赤色に変わる。
- 黄色のボックスの上からカーソルを外すと、背景色が元の黄色に戻る。
実装例(サンプル)のソースコード
JavaScript
<script>
<!--
jQuery( function() {
jQuery( '#jquery-api-bind' ) . bind( 'click dblclick', function(){
jQuery( this ) . css( 'backgroundColor', 'red' );
} );
jQuery( '#jquery-api-bind' ) . bind( 'mouseout', function(){
jQuery( this ) . css( 'backgroundColor', 'yellow' );
} );
} );
// -->
</script>
<!--
jQuery( function() {
jQuery( '#jquery-api-bind' ) . bind( 'click dblclick', function(){
jQuery( this ) . css( 'backgroundColor', 'red' );
} );
jQuery( '#jquery-api-bind' ) . bind( 'mouseout', function(){
jQuery( this ) . css( 'backgroundColor', 'yellow' );
} );
} );
// -->
</script>
CSS
<style>
<!--
#jquery-api-bind {
width: 100%;
height: 200px;
cursor: pointer;
background-color: yellow;
border-radius: 10px;
}
-->
</style>
<!--
#jquery-api-bind {
width: 100%;
height: 200px;
cursor: pointer;
background-color: yellow;
border-radius: 10px;
}
-->
</style>
HTML
<div id="jquery-api-bind"></div>