what is the use of event name with selector in jquery?

Question

i have this html

<div class="wrapper">
  <div class="holder">
    <span class="pressy">press here..!!</span>
    <div class="inner">
        <span class="pressy">press here..!!</span>
    </div>
  </div>
</div>

and js

$('.wrapper').on('mousedown.inner','.pressy',function(e){
  alert($(this).attr('class'))
})

actually i'm getting alert for both the 'pressy' how can i get it only for inner pressy??

and one more thing is what is use of

'mousedown.inner'

(not in this. i'm asking about general use) how can i use it correctly??

fiddle: http://jsfiddle.net/4ayqqfnm/

thanks..

Answer 1

It is called event namespacing, it is used so that we can target those events individually.

Assume a case where you are adding multiple click handler to a button, then want to remove only one of those handlers, how do you do that? doing $('button').off('click') will remove all click handlers added to the button which is not what we want.

So the solution is to use namespaces like

$('button').on('click.myevent', function(){...})

then if we do

$('button').off('click.myevent')

it will remove only those click handlers which are added with the namespace myevent