How to make .on and .addEventListener code versions work?

[Trial10]

Hi, 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?

[JoãoCésar · Accepted solution]

Hi.

I think the confusion came from the name you gave to the function that handles the event in the addEventListener approach.

You called it evt but you also use evt as the name for the event object in the on approach.

So, if you do something like this...

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

... it should work.

Please let us know.

Regards,

JC

[Trial10]

Thanks, it works! I didn't know you can insert letters/names in the function's parentheses like that.

So in your code, the function's name is "evt", but is the "e" inside its parentheses a name for it too? Haha, I'm trying to figure that out.

I also found that using stage.mouseX, and stage.mouseY somehow works and mimics the .on approach in my original post:

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 would like to understand more about the "e" in function evt(e) thing in your code, if it's possible for you to explain it. 🙂

[JoãoCésar]

Great!

I'm glad it worked.

Every function we use as an event handler receives an object containing all the information about the event added/fired.

Any name that follows variable naming rules can be given to that object.

A simple and silly example for you to understand this JavaScript concept:

function getHiddenMessage(callback)
{
	callback("the cake is a lie");
}

function reveal(message)
{
	console.log(message);
}

getHiddenMessage(reveal);

You can read more about adding event listeners here and here.

I hope it helps.

Regards,

JC