shenkwen shenkwen - 6 months ago 18x
Javascript Question


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

$(document).on('click.card', '.card', function (e) {

I am not unfamiliar with jQuery's
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
(if it is a custom event), because I only load this
and another
file from the MaterializeCSS package besides jQuery, and I searched
there is nothing related to this event. It seems to me that the custom event is in this pattern:
original event
, but I tried replacing
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.


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):


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.