Use

Use can-event/async/async's async method to make event binding and dispatching happen immediately following the current event loop.

import canEvent from "can-event";
import canAsync from "can-event/async/async";
canAsync.async();

const obj = {};
Object.assign( obj, canEvent );

obj.addEventListener( "foo", function() {
    console.log( "heard foo" );
} );
obj.dispatch( "foo" );
console.log( "dispatched foo" );

// Logs -> "dispatched foo" then "heard foo"

This means you never have to call start and stop. Notice that in the following example "change" is only fired once:

import canAsync from "can-event/async/async";
canAsync.async();

import compute from "can-compute";

const first = compute( "Justin" );
const last = compute( "Meyer" );

const fullName = compute( function() {
    return first() + " " + last();
} );

fullName.on( "change", function( ev, newVal, oldVal ) {
    newVal; //-> "Payal Shah"
    oldVal; //-> "Justin Meyer"
} );

first( "Payal" );
last( "Shah" );