jQuery API の event.namespace は、イベントトリガー時に指定した名前空間が格納されているプロパティ。
記述例
名前空間の指定
jQuery( セレクター ) . trigger( 'イベントタイプ.名前空間' );
「セレクター」の要素の、「イベントタイプ.名前空間」のイベントを実行。「名前空間」は event.namespace に格納される。
名前空間の呼び出し方
jQuery( セレクター ) . bind( 'イベントタイプ.名前空間', function( event ) {
var str = event . namespace;
} );
var str = event . namespace;
} );
「セレクター」の要素の、「イベントタイプ.名前空間」のイベントに、イベントハンドラをバインド。名前空間を呼び出し、変数「str」に格納。
実装例（サンプル）
実装例（サンプル）の動作について
「赤色」「青色」「緑色」のボタンをクリックすると、ボタンの下のボックスの背景色が、クリックしたボタン名の色に変わる。
実装例（サンプル）のソースコード
JavaScript
<script>
<!--
jQuery( function() {
jQuery( '#jquery-api-bind' ) . bind(
'color.red color.blue color.green',
function( event ) {
var str = event . namespace;
jQuery( '#jquery-api-bind' ) . css( 'backgroundColor' , str );
}
);
jQuery( '#jquery-api-click-red' ) . click( function( event ) {
jQuery( '#jquery-api-bind' ) . trigger( 'color.red' );
} ) . click();
jQuery( '#jquery-api-click-blue' ) . click( function( event ) {
jQuery( '#jquery-api-bind' ) . trigger( 'color.blue' );
} );
jQuery( '#jquery-api-click-green' ) . click( function( event ) {
jQuery( '#jquery-api-bind' ) . trigger( 'color.green' );
} );
} );
// -->
</script>
<!--
jQuery( function() {
jQuery( '#jquery-api-bind' ) . bind(
'color.red color.blue color.green',
function( event ) {
var str = event . namespace;
jQuery( '#jquery-api-bind' ) . css( 'backgroundColor' , str );
}
);
jQuery( '#jquery-api-click-red' ) . click( function( event ) {
jQuery( '#jquery-api-bind' ) . trigger( 'color.red' );
} ) . click();
jQuery( '#jquery-api-click-blue' ) . click( function( event ) {
jQuery( '#jquery-api-bind' ) . trigger( 'color.blue' );
} );
jQuery( '#jquery-api-click-green' ) . click( function( event ) {
jQuery( '#jquery-api-bind' ) . trigger( 'color.green' );
} );
} );
// -->
</script>
CSS
<style>
<!--
#jquery-api-click-color button {
margin: 5px;
}
#jquery-api-bind {
height: 100px;
border: 1px solid gray;
border-radius: 10px;
background-color: red;
}
-->
</style>
<!--
#jquery-api-click-color button {
margin: 5px;
}
#jquery-api-bind {
height: 100px;
border: 1px solid gray;
border-radius: 10px;
background-color: red;
}
-->
</style>
HTML
<p id="jquery-api-click-color">
<button id="jquery-api-click-red">赤色</button>
<button id="jquery-api-click-blue">青色</button>
<button id="jquery-api-click-green">緑色</button>
</p>
<div id="jquery-api-bind"></div>
<button id="jquery-api-click-red">赤色</button>
<button id="jquery-api-click-blue">青色</button>
<button id="jquery-api-click-green">緑色</button>
</p>
<div id="jquery-api-bind"></div>