Custom events

You can make up your own events and event selectors in Active CSS. You are not limited to only using the browser events.

As an example, in the past we have used custom events for our unit tests on the Active CSS core, and triggered them off sequentially.

The method for setting up a custom event is exactly the same as when you set up a JavaScript event.

For example, here we create a custom event called "setBlackTheme":

#startCustomEvent:click {
    body {
        trigger: setBlackTheme;
    }
}

body:setBlackTheme {
    background-color: #000;
    color #eee;
}

You can also use it on custom event selectors, ie. event selectors that refer to an element that does not exist. Custom event selectors are a bit like functions in that you can use them to run specific actions and trigger them when you need to. Event selectors starting with a "~" are custom event selectors, like this example:

#startTest:click {
    ~test-1 {
        trigger: runTest;
    }
}

~test-1:runTest {
    body {
        add-class: .test1;
    }
    func: checkAddClassHappened;
}

Target selectors and action commands run in sequence in Active CSS (as of version 2.3.0), so it is certain that the "func" command will run after the "add-class" command above.

Any events you trigger in Active CSS will not trigger anything external to Active CSS when called, unless you use the trigger-real command, which tries to perform a real bubbling browser event on a target.

Naming conventions for custom events

Because a Active CSS event declaration is a set of actions on targets, you should try and stick to a naming convention for the event that implies the event taking place, such as in the above examples. This will make it easier to read for yourself and others in the future. Double word camel-case is a good format to use, like "runTest". This will also ensure it doesn't clash with native browser events.

Important note: You cannot name your custom events, "click", "mouseover", ie. the browser events, or the Active CSS only "clickoutside", "draw", "init" events or any of the special keyboard events. These names are reserved and may produce unexpected results if you use them as custom events. Try and stick with double word camel-case event names, like "eatCheese".