Namespace function in jQuery

Question

What is the difference between these two pieces of code? Both are working perfectly, so why use .dropdown.data-api in a function? I read about namespace on the internet, but I am not clear about that. Can anyone tell me what is the use of namespace functions?

$('html').on('click.dropdown.data-api',
  function () {
    $el.parent().removeClass('open')
  })
}

$('html').on('click',
  function () {
    $el.parent().removeClass('open')
  })
}

Hiya amit I hope you are not talking about dropdown plugin where the first on is a standard .on event an stackoverflow.com/questions/11208483/… soimething like this the question has a code :) — Tats_innit
– Tats_innit, Commented Jul 9, 2012 at 11:10

Mitya · Accepted Answer · 2012-07-09 11:22:36Z

6

Namespacing an event allows you to target a particular event should you wish to, say, unbind or trigger it.

Imagine you have two events of the same kind bound to the same element(s).

$('.something').on('click', function() { /* do something */ });
$('.something').on('click', function() { /* do something else */ });

Since we didn't namespace either event, it is now difficult to unbind or trigger one but not the other. Now consider:

$('.something').on('click.one', function() { /* do something */ });
$('.something').on('click.two', function() { /* do something else */ });

Because this time each event has its own namespace, we can now trigger or unbind one or the other, leaving the other untouched.

$('.something').off('click.one'); //unbind the 'one' click event
$('.something').trigger('click.two'); //simulate the 'two' click event

[EDIT - as @jfrej right points out below, namespaces mean you sometimes don't even need to reference the event type name. So if you had a mouseover and click event both on a single namespace, you could unbind both with off('.namespace').]

edited Jul 9, 2012 at 11:22

answered Jul 9, 2012 at 11:13

Mitya

34.8k15 gold badges70 silver badges126 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

worenga Over a year ago

interesting, i previously always did that with specifying the event method in the unbind, this seems easier.

Rup Over a year ago

+1 Beat me to it. jQuery's documentation is here: Namespaced Events

Jitender Over a year ago

great example. after reading your answer i have no doubt in my mind. thanks Utkanos.nice way to explaining

jfrej Over a year ago

What's also very useful (and mentioned in the docs linked above) is that you can unbind all event handlers from one namespace e.g. $('.something').off('.one'); at once

Mitya Over a year ago

Very true. In my example I unbound namespaced events of a particular type, but yes, you can omit the event type name and just target the namespace. Worth an edit, I think.

|

Collectives™ on Stack Overflow

Namespace function in jQuery

1 Answer 1

6 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

6 Comments

Your Answer

Sign up or log in

Post as a guest

Related