jcarousel events binding - events syntax

Question

The documentation of jcarousel specifies possible create event for jcarousel object, however when binding to it the following name is used jcarousel:create. What is this syntax?

My understanding is that the event name is preceded by namespace, however I haven't encountered this syntax before. jQuery's syntax for namespaces is different and uses dot as a separator between namespace and event name.

Answer 1

This looks like a syntax for the jcarousel that is specifically created by those who wrote jcarousel. However the syntax used appears like it was created as a namespace to avoid conflicts with other plugins.

The example used in the documentation for create states that whatever is contained in the event handler will be run when the carousel is created.

Example Code:

$('.jcarousel').on('jcarousel:create', function(event, carousel) {
    // "this" refers to the root element
    // "carousel" is the jCarousel instance
});

It is possible to create custom events in jQuery this is done using trigger and bind. See Custom events in jQuery?

In the documentation of jcarousel it says that "Some events are triggered from the constructor, so you have to bind to the events before you initialize the plugin."

In the core.js file of jcarousel it has a function called _trigger. When this is called it triggers specific events. Do take note that in the code it creates an event object using the $.Event() function passing in the name of the event as (pluginName + ':' + type).toLowerCase().This creates an event object with a name such as jcarousel:create. It uses the created event object to trigger that name of event which calls the appropriate event handler.

Here is the code that gets called by the constructor:

        _trigger: function(type, element, data) {
            var event,
                defaultPrevented = false;

            data = [this].concat(data || []);

            (element || this._element).each(function() {
                event = $.Event((pluginName + ':' + type).toLowerCase());

                $(this).trigger(event, data);

                if (event.isDefaultPrevented()) {
                    defaultPrevented = true;
                }
            });

            return !defaultPrevented;
        }