trigger

Syntax

trigger: (event) [every (time)] [after (time)][, (event)...];

This command runs a defined Active CSS event declared in the config on the target selector.

You can use this functionality for sharing event declarations. For example, a logoff script may run a custom event that cleans up the page and sends the user to your home page. The shared event can then be triggered from different locations in your code base.

This is not to be confused with trigger-real, which simulates an actual browser JavaScript event, including native bubbling. So this will only run the defined event set up in your config - that is all. Ie. if you call a click event, it will not simulate a real click event in the browser, it will only run the defined event from the config.

You can either trigger DOM events, or you can write custom events and get them triggered by other events.

In the example below for a regular DOM event, the click event is triggered for the #doSomething element when #myDiv is clicked on:

#myDiv:click {
    #doSomething {
        trigger: click;
    }
}

#doSomething:click {
    body {
        add-class: .test;
    }
}

You can create your own custom events and name them as you wish. But try to keep them camel-case, and don't call them an existing JavaScript event name, such as "mouseover".

Here is an example of a custom event "doSomething" being triggered:

#myDiv:click {
    #mySecondDiv {
        trigger: doSomething;
    }
}

#mySecondDiv:doSomething {
    body {
        add-class: .test;
    }
}

Bubbling will not occur from a trigger. If you need bubbling, try trigger-real.

trigger