jQuery API の bind( customEvent, fn ) は、１つ目の引数に指定したカスタムイベントに、２つ目の引数に指定したイベントハンドラをバインドすることができるメソッド。
イベントタイプにバインドすることもできる。
記述方法
jQuery( セレクター ) . bind( カスタムイベント, イベントハンドラ );
「セレクター」の要素の「カスタムイベント」のイベントに、「イベントハンドラ 」をバインド。
実装例（サンプル）
実装例（サンプル）の動作について
黄色のボックス内の上部中央のセレクトボックスで、カラーネームを選択すると、背景色が選択したカラーネームの色に変わる。
実装例（サンプル）のソースコード
JavaScript
<script>
<!--
jQuery( function() {
jQuery( '#jquery-api-bind' ) . bind( 'customEventName', function( event, colorName ){
jQuery( this ) . css( 'backgroundColor', colorName );
} );
jQuery( '#jquery-api-change-select' ) . change( function () {
var str = jQuery( '#jquery-api-change-select option:selected' ) . text();
jQuery( '#jquery-api-bind' ) . trigger( 'customEventName', str );
} )
.change();
} );
// -->
</script>
<!--
jQuery( function() {
jQuery( '#jquery-api-bind' ) . bind( 'customEventName', function( event, colorName ){
jQuery( this ) . css( 'backgroundColor', colorName );
} );
jQuery( '#jquery-api-change-select' ) . change( function () {
var str = jQuery( '#jquery-api-change-select option:selected' ) . text();
jQuery( '#jquery-api-bind' ) . trigger( 'customEventName', str );
} )
.change();
} );
// -->
</script>
CSS
<style>
<!--
#jquery-api-bind {
width: 100%;
height: 150px;
background-color: yellow;
border-radius: 10px;
border: 1px solid gray;
text-align: center;
}
-->
</style>
<!--
#jquery-api-bind {
width: 100%;
height: 150px;
background-color: yellow;
border-radius: 10px;
border: 1px solid gray;
text-align: center;
}
-->
</style>
HTML
<div id="jquery-api-bind">
<select id="jquery-api-change-select">
<option selected="selected">yellow</option>
<option>red</option>
<option>blue</option>
<option>green</option>
<option>pink</option>
</select>
</div>
<select id="jquery-api-change-select">
<option selected="selected">yellow</option>
<option>red</option>
<option>blue</option>
<option>green</option>
<option>pink</option>
</select>
</div>