I'm trying to puzzle out the event dispatching in Javascript. The example below uses Fabricjs library.

AS IS: if we mouseover the redBox, it becomes black.

TO BE: I'm trying to invoke the redBox mouseover event from greyBox mouseover event. So if we mouseover the greyBox, it must work as if we mousever the redBox. As a result the redBox must become black.

But I don't understand what to write instead of interrogation mark.

var greyBox = new fabric.Rect({
    fill: 'grey',
    width: 100,
    height: 100
});

var redBox = new fabric.Rect({
    left:300,
    top:300,
    fill: 'red',
    width: 100,
    height: 100
});

function createCanvas(id){
    canvas = new fabric.Canvas(id);
    canvas.add(greyBox);
    canvas.add(redBox);

    redBox.on("mouseover", function(e){
        redBox.set({fill: 'black'});
    })

    greyBox.on("mouseover", function(e){
        // ????
    })

    return canvas;
}