2013/08/01

[jQuery]on時の名前空間について

よくプラグインを見ていると下の様な記述に出くわすことがあります。

$('#hoge').bind('click._bar',function(e){


});
クリックイベントが実行されるのはわかるのですが、なぜ、後ろに文字列があるのか?

調べた結果、名前空間と呼ばれるもので、offのときにその名前空間を指定すると、指定されたイベントだけを削除できるようです。
<script>
jQuery(function($){

  $('#run').bind('click._default',function(e){
    e.preventDefault();
    console.log('click._default called')
  });

  $('#run').bind('click._custom',function(e){
    e.preventDefault();
    console.log('click._custom')
  });

  $('#detach').on('click',function(e){
    e.preventDefault();
    $('#run').off('click._custom');
  });

  $('#alldetach').on('click',function(e){
    e.preventDefault();
    $('#run').off('click');
  });

});
</script>
<input type="button" value="Run" id="run">
<input type="button" value="Detach" id="detach">
<input type="button" value="All Detach" id="alldetach">
上の例の場合、「Detach」を押した後、runをクリックすると「click._default」だけが表示されるのに対し、「All Detach」をクリックした後、runをクリックすると何も表示されなくなります。

一部だけunbindしたいときに便利ですね。

0 コメント:

コメントを投稿