CODEWITHSUNDEEP
jquery
Steve
Steve

Reputation: 4898

Strange things with the on() method

I've run into some jQuery that has:

  .on('mousedown.minicolors', '.minicolors-swatch', function  (event) {

       --  some code  --
   })

Control came here directly from jQuery.min.js in response to the mousedown.

The first question is, what is the wrapped set that the on() method is working on? Second, the .minicolors after mousedown seems to be a "namespace," from reading the documentation. "mousedown" is indeed the name of a plugin that has been created here. But what, exactly, does that namespace do for us in mousedown.minicolors?

Thanks for adding any clarity here?

Thanks

Upvotes: 1

Views: 106

Answers (3)

Steve
Steve

Reputation: 4898

Regarding the wrapped set that the .on is being applied to, I can see now that it's $(document). The code is:

//Handle Events
$(document)

.on('mousedown.minicolors', '.minicolors-grid', function (event) {
              })
.on('mousedown.minicolors', '.minicolors-space', function (event) {
              })
.on('mouseover.minicolors', '.minicolors-grid', function (event) {
              })
.on('mouseover.minicolors', '.minicolors-space', function (event) {
              });

which is actually

//Handle Events
$(document).on(...).on(...).on(....).on(...);

The punctuation was throwing me, and it still seems like a strange way to define all your event handlers, but I guess it works.

Thanks for the explanation on the namespace.

Upvotes: 0

Jon
Jon

Reputation: 437336

The first question is, what is the wrapped set that the on() method is working on?

Whatever is before the dot -- your code snippet starts just after that, so we don't know.

This is the delegated version of .on which sets up one event handler on each element in the wrapped set for .on (in the delegated version, this is typically just one element since if there were more you could substitute both with any of their common ancestors up to and including document).

This event handler responds to any event triggered on a descendant that matches the selector provided. For example, $(document).on("click", "div.foo", ...) installs an event handler on document that responds to a click on any div having the class foo.

Second, the .minicolors after mousedown seems to be a "namespace," from reading the documentation. "mousedown" is indeed the name of a plugin that has been created here. But what, exactly, does that namespace do for us in mousedown.minicolors?

The actual plugin name is minicolors; mousedown is the (namespaced) event name. What the namespace does is:

  1. It allows you to differentiate between events with the same common names as defined by different plugins. Of course you could do that also without the namespace abstraction, e.g. with events named plugin1mousedown and plugin2mousedown, but those would be two different events. Namespacing allows you to "tag" an event handler while still referring to the same event that a non-namespaced handler refers to.
  2. It allows you to unbind all event handlers for events in the same namespace at once: $whatever.off(".minicolors"). This is very useful whenever a plugin instance is "destroyed".

Upvotes: 1

sroes
sroes

Reputation: 15053

The namespace allows you to easily remove the event handler like this:

.off('mousedown.minicolors');

Otherwise you'd have to remove the eventhandler by also passing the original eventhandler itself:

var originalEventHandler = function() { ... };
el.on('mousedown', originalEventHandler)
el.off('mousedown', originalEventHandler)

Upvotes: 3

Related Questions