namespaceとは
- ここで説明する namespace とは次の語句からなるjQueryのEventObjectプロパティです。
- namespace
- 読み: ネームスペース
意味: 同種のものを区別するための名前空間
namespaceプロパティの概要
この EventObject プロパティは、イベントが発生したときのイベントのネームスペースを取得することができます。
構文
サンプルを見る前に構文を確認しておきます。
構文は 02 行目の部分です。 02 行目の eo は 01行目の function(eo) の イベントオブジェクトを参照しています。
$(Selector).EventMethod(function(eo){
var eventNameSpace = eo.namespace;
});サンプルコードと実行結果
ここでは、div 要素に on() メソッドを使って myEvent.No1 と myEvent.No2 とう名前の新しいイベントを2つ登録します。 この No1 と No2 の部分が名前空間 ( ネームスペース) の部分です。
サンプルの上下にはボタンが設置してありますので、この ボタンをクリックすると myEvent というイベントを trigger() を使って実行します。 ただし、 myEvent というイベントは2つ有りますので、ここでネームスペースを使って No1 を実行するのか、No2 を実行するのかを決定しています。
仮にネームスペースを付けない myEvent という名前だけでトリガーした場合には 2つのイベントは登録順に従って 2つとも実行されます。
サンプルコード: CSS
<style>
div{
background-color: ##lightpink;
border: thin solid ##gray;
margin: 1em 0;
padding: 0 1em;
height: 2em;
width: 5em;
}
</style>
サンプルコード: HTML
<head>
<style>...</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<body>
<button id="idButtonNo1">BUTTON</button>
<div></div>
<button id="idButtonNo2">BUTTON</button>
<script>...</script>
</body>
- 06: button (ボタンです。この要素のクリックイベントのハンドラーから trigger メソッドを使って myEvent.No1 イベントを発生させます。)
- 07: div (ブロックコンテナー要素です。この要素に myEvent.No1 と myEvent.No2 という名前のイベントを登録します。 この No1 と No2 の部分が名前空間です。)
- 08: button (ボタンです。この要素のクリックイベントのハンドラーから trigger メソッドを使って myEvent.No2 イベントを発生させます。)
サンプルコード: script
<script>
$("div").on("myEvent.No1", function(eo){
$(this).text(eo.namespace).css("background-color","##lightgreen");
});
$("div").on("myEvent.No2", function(eo){
$(this).text(eo.namespace).css("background-color","##lightblue");
});
$("#idButtonNo1").click(function(){
$("div").trigger("myEvent.No1");
});
$("#idButtonNo2").click(function(){
$("div").trigger("myEvent.No2");
});
</script>