jQuery自定义事件混乱

Question

I have read the custom events documentation of jQuery. Just when I started to understand that you can trigger those custom events yourself, and elements like a link or window own standard events like click, scroll or resize....

I was confused when I was reading the code from unveil.js At the bottom there is the following code:

$w.on("scroll.unveil resize.unveil lookup.unveil", unveil);

What are those events doing and where are they set / triggered? And what is a "lookup" event at lookup.unveil.

Answer 1

Those are namespaced jQuery events

In jQuery events can be namespaced to make them unique and easier to work with.
Generally you'd add a click event like this

$('.element').on('click', fn);

but what if you wanted to remove the event from just one element and you did

$('.element').off('click', fn);

you'd remove the event from all elements, so you can namespace the event instead

$('.element').on('click.custom', fn);

The names doesn't matter, it's still a click event, but now it can be removed without affecting other elements matching the selector that also has a click event by doing

$('.element').off('click.custom', fn);

to trigger such an event, one would just do

$('.element').trigger('click.custom');

and it would also be triggered by a regular click, just like any click handler.

In jQuery one can also define custom events, which you probably know if you're read the Custom Events docs , and it's as easy as doing

$('.elements').on('lookup.unveil', fn);

where .unveil is just the custom namespace for the plugin, and that event can be triggered at the appropriate time by doing

$('.elements').trigger('lookup.unveil');

and as it's not a native event, it doesn't really get triggered by anything else.