trigger-real

Syntax

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

This command will attempt to trigger an actual JavaScript event on the target selector. The event triggered will be able to be detected external to the Active CSS environment. This is not to be confused with trigger, which only runs defined Active CSS config.

You can only run trigger-real on actual DOM elements with real JavaScript events in the config. Attempting to run a trigger-real on an element that is not there or with a custom event will result in an error.

It is less error-prone to use the "trigger" command if you want to only run Active CSS config and you don't need bubbling or an external response. But sometimes you need to run a real event on an element, and the trigger command is not enough - you need a real event.

In the example below, a JavaScript click event is trigger-real'ed for the #doSomething element when #myDiv is clicked on:

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

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

Bubbling, etc. will occur if you use trigger-real.

trigger-real

This example demonstrates the difference between trigger and trigger-real.

Open up the DevTools and console and click the first button. The look at the contents of the "o" variable. If you drill down to the o.e "type" You will see that the actual click event has been carried to the external function.

Now mouse-over the "Trigger it" button. The click event has not been passed, as this was a trigger from a mouseover event.

Now mouse-over the "Trigger-real it" button. The click event has been passed, as this was a trigger-real, even though it was triggered by a mouse-over.

Button with event Trigger it Trigger-real it

#triggerRealButton1:click {
    func: myExternalFunction;
}

#triggerRealButton2:mouseover {
    #triggerRealButton1 {
        trigger: click;
    }
}

#triggerRealButton3:mouseover {
    #triggerRealButton1 {
        trigger-real: click;
    }
}

<p>This example demonstrates the difference between trigger and trigger-real.</p>

<p>Open up the DevTools and console and click the first button. The look at the contents of the "o" variable. If you drill down to the o.e "type" You will see that the actual click event has been carried to the external function.</p>
<p>Now mouse-over the "Trigger it" button. The click event has <em>not</em> been passed, as this was a trigger from a mouseover event.</p>
<p>Now mouse-over the "Trigger-real it" button. The click event has been passed, as this was a trigger-real, even though it was triggered by a mouse-over.</p>

<button id="triggerRealButton1">Button with event</button>
<button id="triggerRealButton2">Trigger it</button>
<button id="triggerRealButton3">Trigger-real it</button>

<script type="text/javascript">
    function myExternalFunction(o, pars) {
        console.log('o:');
        console.log(o);
        console.log('pars:');
        console.log(pars);
    }
</script>