I'm just trying to figure out how the codes work. I know .on is like a shortcut and it works like this:

this.circle_mc.on("pressmove", function (evt) {
    var point = stage.globalToLocal(evt.stageX, evt.stageY)
    evt.currentTarget.x = point.x;
    evt.currentTarget.y = point.y;
});

so I thought the .addEventListener way would work too, but it doesn't.

this.circle_mc.addEventListener("pressmove", evt.bind(this));

function evt() {
    var point = stage.globalToLocal(evt.stageX, evt.stageY)
    this.circle_mc.x = point.x;
    this.circle_mc.y = point.y;
}

 but it doesn't. How do you make the .addEventListener version work?

Update: I'm not sure which ones are JS objects/HTML elements/DOM events, but I somehow got it to work using this code:

this.circle_mc.addEventListener("pressmove", evt.bind(this));

function evt() {
    var point = stage.globalToLocal(stage.mouseX, stage.mouseY)
    this.circle_mc.x = point.x;
    this.circle_mc.y = point.y;
}

I figured when I use .addEventListener, it calls the function outside of it. Both evt.stageX and evt.stageY would always be 0. When I changed it to stage.mouseX and stage.mouseY, it worked just like the .on shortcut version.

Even though I made it work, hopefully someone can explain it more clearly, cause it's all still hazy to me.

2nd Update: Someone in the Adobe Animate forum mentioned to do it this way, then I wouldn't need to change the stageX/stageY to mouseX/mouseY.

function evt(e) {
    var point = stage.globalToLocal(e.stageX, e.stageY)
    this.circle_mc.x = point.x;
    this.circle_mc.y = point.y;
}