Event dispatching in Javascript

Question

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;
}

Why not run the code from redBox's event listener in the event listener of greyBox? — Luca Kiebel, Jan 09 '22 at 14:21

score 1 · Answer 1 · answered Jan 09 '22 at 14:24

1

You could move the logic to a separate function and invoke it when necessary:

const makeRedBoxBlack = () => redBox.set({fill: 'black'});

redBox.on("mouseover", makeRedBoxBlack);
greyBox.on("mouseover", makeRedBoxBlack);

answered Jan 09 '22 at 14:24

Luc

544
3
9

score 0 · Answer 2 · answered Jan 09 '22 at 14:21

0

You only have to add that red box set statement, so it should something like :-

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

answered Jan 09 '22 at 14:21

Abdusalam mohamed

348
3
8

no, it's only example, it's not the point. it's about event dispatching - on event from another event – AntonAntonoff Jan 09 '22 at 14:26
oh so i think that case you should add a listener to that event maybe `redbox.addEventListener('mouseover', greyBox.set({fill: 'black'}))` if i understood correctly – Abdusalam mohamed Jan 09 '22 at 14:32

Event dispatching in Javascript

2 Answers2