Events & Listeners

You can emit events from both your Wires and JavaScript. Superb!

Emitting Events

You can emit events from Actions, Templates, and JavaScript.


Using the emit method:

function someAction() {
    emit( "taskAdded" );

You can provide arguments to all listeners by passing an array as the second argument.

function someAction() {
    emit( "taskAdded", [
        "some task",
    ] );

When emitting events, arguments must be passed as an array to ensure proper positioning both within CFML and JavaScript.


Using the $emit() method:

<button wire:click="$emit( 'taskAdded' )">


Using the global cbwire.emit():

    cbwire.emit( 'taskAdded' );


You can register event listeners on a Wire by defining listeners.

component extends="cbwire.models.Component"{
    listeners = {
        "taskAdded": "clearCache"

    function clearCache(){}

The clearCache method will be invoked when a taskAdded event is emitted.

JavaScript keys are case-sensitive. You can preserve the key casing in CFML by surrounding your listener names in quotations.


Listening to events that you emit in your Actions can be done using cbwire.on().

    cbwire.on( 'taskAdded', task => {
        console.log( 'A task was added. ');

Last updated