shenkwen shenkwen - 7 months ago 23
Javascript Question

jQuery(document).on('click.classname'.......)?

I was reading through MaterializeCSS's js files, in its "cards.js" file, there are these lines:

$(document).on('click.card', '.card', function (e) {
//something
});


I am not unfamiliar with jQuery's
.on()
function, but I never used custom event as the first parameter. What I don't understand is there seems to be nowhere defining this custom event
click.card
(if it is a custom event), because I only load this
card.js
and another
velocity.min.js
file from the MaterializeCSS package besides jQuery, and I searched
velocity.min.js
there is nothing related to this event. It seems to me that the custom event is in this pattern:
original event
.
classname
, but I tried replacing
card
with other class name and it didn't work.

I tried to look for more information about how to define a custom event but couldn't find anything useful.

My question is how to find where this custom event is defined.

Answer

This is not a custom event, this is a DOM event with a namespace:

click is the DOM event, and card the event namespace.

If you have multiple handlers on the same element, this can help you discern them. You could remove only this listener (and leave all other click listeners):

$(document).off('click.card');

And you can trigger them manually using $('...').trigger:

$('.card').trigger('click.card'); // only triggers this specific click listener, not the others

You can find out more about event namespaces here.